TweenMax参数用法中文介绍
TweenMax 建立在 TweenLite 和 TweenFilterLite 基础之上,因此,又揉合了这二者的功能,使得功能更加的齐备,但是如果说易用性,觉得还是 TweenLite 来得方便一些。我的译文是从 TweenLite 开始的,接着是 TweenFilterLite 最后是 TweenMax ,这也恰好是这个类发展的轨迹,沿着这个轨迹一路读过来,会觉得容易理解很多。
TweenMax 建立在 TweenLite 核心类以及它的大哥 TweenFilterLite 基础之上,它为 Tween 家族增加了新的受欢迎的功能(尽管只是锦上添花),从而使家族更加的壮大,比如贝赛尔缓动、暂停/继续能力,简便的连续缓、16进制颜色缓动、以及更多的 内容。
TweenMax
采用了与它的兄弟相似的易于学习的语法结构。实事上,因为它扩展自它们,TweenMax 可以做任何 TweenLite 和/或者 TweenFilterLite 能做的事,还加上了更多的特色。那么为什么要建立 3 个类,而不是 1 个呢?问的好,我的目标是:效率最大化,尺寸最小化。坦白的说,TweenLite 可能是所有的程序员在 90% 的项目中都需要用到的,而它仅有 3k。相对它的功能来说,它是非常高效和紧凑的。
但是如果你需要对滤镜进行缓动,或者更丰富的图像效果,比如说饱和度(saturation)、对比度(contrast)、色相(hue)、调色 等等进行控制, 那就装上 TweenFilterLite 总共 6k 。还想要的更多? No problem !TweenMax 已经在总共 8k 的大小里面塞满了足够多的功能。
想查看相关的功能对比图,请访问 TweenMax.com 以获取更多信息。
( TweenMax 类包中直接包含有独立的 TweenLite 和 TweenFilterLite 类,因此下载这一个包就可以了,在 Flash 类路径中添加的时候,也只需要添加这一个路径就可以了—-译者注)
TweenMax 创造了一种全新的功能,叫做 “bezierThrough”(暂译为贝塞尔通路),这个功能允许你定义一些点,通过贝塞尔曲线连接这些点,(通常的控制点只是用来拉近曲线,这里的点 直接在曲线的路径上)。当然,如果你愿意,你可以用更正规的贝塞尔曲线。目前,TweenMax增加了下列功能(相对于 TweenFilterLite 而言):
进行贝塞尔缓动(包括指定通路 THROUGH 点和运动对象的自动方位导航(在贝塞尔曲线中移动时,对象的旋转角度是自动控制的,译者注))
连续的缓动 或称为 序列化的缓动
对对象数组(数组中存放了不同的对象,译者注)中的对象进行统一的缓动,使用 allTo() 和 allFrom()
缓动中的 暂停/继续 功能,使用 pause() 和 resume() 方法,或者 “paused” 属性 (比如 myTween.paused = true)
isTweening 静态方法,用来判断一个对象是否正在进行缓动(比如 TweenMax.isTweening(my_mc))
跳转至缓动的任何时段,使用 “progress” 属性。输入一个 0 到 1 之间的数值。 progress 值为零,将会把缓动的进程跳转到初始阶段,值为 1 时,跳转至 100% 完成状态,值为 0.5 时,将转至缓动过程的半山腰位置。
例如: myTween.progress = 0.5;
对 16 进制的颜色进行缓动,使用 hexColors 属性
获取缓动效果的实例数组,该数组中包括了加在一个指定的目标对象上的所有的缓动效果的实例,该数组可以容纳 TweenMax 和 TweenLite 和 TweenFilterLite 三种类型的缓动实例。
例如: TweenMax.getTweensOf(my_mc); // (如果 my_mc 上使用了不止一个的缓动效果,那么这里将返回一个数组,数组中是不同的缓动效果的实例,可以用来对每个缓动进行实时的控制,译者注)
获取 TweenMax (和 TweenLite 和 TweenFilterLite) 的实例数组,使用用静态函数 getAllTweens()
中止(杀死)所有的缓动(以及可选的完成部分缓动)
暂停/继续 全部的缓动
=========================================================
参数
target : Object – 目标 MovieClip (或其它对象),对它的属性进行缓动
duration : Number – 动画的时间长度(单位:秒)
vars : Object -一个包含了多种属性的对象,用来存贮缓动结束时的各种属性值(如果你使用 TweenLite.from() 方法,这里的参数表示缓动的初始值)。
例如:
alpha: 目标对象在缓动结束时的 alpha (不透明度的级别)值。(当使用TweenMax.from()时,表示开始缓动时的 alpha 值)
举个例子,如果 target_obj.alpha 是 1,当这个缓动代码被执行时,将 alpha 参数设成 0.5 ,它将实现从 1 到 0.5 的渐变缓动。
x: 想要改变 MovieClip 的 x 位置,只需要将这个参数值设成你希望的缓动结束时的值即可。(如果使用 TweenMax.from(),则表示缓动开始时的 x 值)
================================
专有属性
delay : Number – 延迟缓动 (以秒为单位)
ease : Function – 缓动函数. 例如,fl.motion.easing.Elastic.easeOut 函数。默认的是 Regular.easeOut函数
easeParams : Array – 用来存贮缓动公式所需要的额外数据. 当使用 Elastic 公式并且希望控制一些额外的参数,
比如振幅和周期。大多数的缓动公式是不需要参数的,因此,你不需要给其它的缓动公式传递参数。
autoAlpha : Number – 用它来代替 alpha 属性,可以获得一些副加的效果,比如当 alpha 值缓动到 0时,
自动将 visible 属性改为 false。当缓动开始前,autoAlpha 大于 0 时,它将会自动把 visible 属性变成 true 。
volume : Number – 改变 MovieClip 或者 SoundChannel 的音量,将缓动结束时的音量值写在这里即可。(如果使用 TweenMax.from(),这里的值表示缓动开始时的音量).
tint : Number – 改变可显示对象(DisplayObject)的色调/颜色,将缓动结束时的16进制值颜色值(比如0xFF0000)写在这里即可。(如果使用 TweenMax.from(),这里的值表示缓动开始时的颜色值).
如果想要移除颜色,传一个 null 做为颜色值即可。
frame : Number – 将 MovieClip 缓动到指定的帧频
bezier : Array – Bezier 缓动,允许你以非线性的方式进行缓动。例如,将一个 MovieClip 从原始的 (0,0) 的位置,向右移动500像素,到(500,0),在缓动的中间向下弯曲。只需要向贝赛尔数组中传递多个对象,每一个都是一个控制点(关于控制点是如何工作 的请参考 Flash 的 curveTo() 绘图方法相关说明)。在这个例子中,假设我们的控制点是 x/y 坐标
250,50。把 my_mc 放到 0,0 位置,然后执行下面的代码:
TweenMax.to(my_mc, 3, {_x:500, _y:0, bezier:[{_x:250, _y:50}]});
bezierThrough : Array – 与上面的贝赛尔数组相似,但是它接收的不是控制点,而是贝赛尔曲线要经过的位置点。与控制点相比,这样的用法更加直观。
orientToBezier : Array (或者 Boolean 类型) – 设计师/开发人员经常用到的一个效果,让 MovieClip/Sprite 自动调整自身的方向(改变 rotation),使之符合贝赛尔路径的方向(就像是汽车在曲折的道路上需要不断调整方向一样—-译者注)。orientToBezier
使得这一切变得简单。为了更精确的调整 rotation 属性,TweenMax 需要 4 方面的信息:
位置属性 1 (通常为 “x”)
位置属性 2 (通常为 “y”)
旋转属性 (通常为 “rotation”)
旋转的度数(可选的 – 让它更容易的正确瞄准 MovieClip )
当 orientToBezier 属性为数组时,该(容器)数组中的每个元素是包含了一组数据的数组(形如[[x1,y1,rota1,ang1],[x2,y2,rota2,ang2]]—-译者注)。
为了获得最大的灵活性,你可以向容器数组中传递任意数量的数组,逐个的指定旋转属性。这在进行 3D 工作进会很方便,因为你可以旋转多个坐标轴。如果进行的是标准的 2D x/y 坐标系贝赛尔缓动,只需要传递一个布尔值 true ,然后 TweenMax 将会使用一个典型的数组设置 [["x", "y", "rotation", 0]] 。
提示:不要忘了这里存在着容器数组(注意:数组前后有两层方括号)
hexColors : Object – 尽管 16 进制颜色是一种技术上使用的数字,但当你试途按照数字增减的老办法来缓动时,你会发现颜色的变化并不平滑。为了更恰当的进行颜色缓动,通常需要独立的对 红、绿、蓝的成分进行缓动。TweenMax 把这一切变得简单。将一个 16 进制颜色值缓动到另一个 16 进制颜色值,只需要使用这个 TweenMax 中专用的 hexColors 属性即可。
这个属性必须是一个对象,该对象具有相关的颜色属性,属性名称与目标对象中使用的 16 进制颜色属性的名称相同。比如,如果 my_obj 对象具有一个“myHexColor”属性,想让它在两秒种内缓动为红色 (0xFF0000),需要这样做:
TweenMax.to(my_obj, 2, {hexColors:{myHexColor:0xFF0000}}); (内层花括号括起来的部分,表示的就是一个包含有 myHexColor属性的对象—-译者注)
可以传递任意数量的 hexColor 属性。
onStart : Function – 在缓动开始时想要执行某个函数,就将函数的引用(通常是函数名)放到这里。当缓动是带延迟的,这一点会非常有用。
onStartParams : Array – 为缓动开始时要执行的函数传递参数。(可选的)
onUpdate : Function – 缓动过程中,每次更新属性值时,会执行这里指定的函数(缓动开始后,每一帧被触发一次)。
onUpdateParams : Array – 给 onUpdate 参数指定的函数传递参数 (可选的)
onComplete : Function – 缓动结束时执行的函数。
onCompleteParams : Array – 给 onComplete 参数所指定的函数传递参数(可选的)
renderOnStart : Boolean – 当使用带有延迟缓动的 TweenFilterLite.from() ,并且希望阻止缓动的渲染(rendering)效果,直到缓动真正开始,将这个值设为 true.默认情况下该值为 false,这会让 TweenMax.from() 渲染效果立即被执行,甚至是在延迟尚未结束之前。
overwrite : Boolean – 如果不希望当前的缓动效果自动覆盖到其它的影响同一属性的缓动,请确保这个值设为 false。
blurFilter : Object – 应用模糊滤镜,需要传递一个具有下列(一个或多个)属性的对象做为参数:blurX(横向的模糊度), blurY(纵向的模糊度), quality(品质,默认值为2)
glowFilter : Object – 应用发光滤镜,需要传递一个具有下列(一个或多个)属性的对象做为参数:alpha(通明度),blurX , blurY , color(颜色),strength(强度), quality,inner(内侧发光),knockout(挖空)
colorMatrixFilter : Object – 应用颜色矩阵滤镜,需要传递一个具有下列(一个或多个)属性的对象做为参数:colorize(色调),amount(总量),contrast(对比 度),brightness(亮度),saturation(饱和度),hue(色相),threshold(阀值),relative(相关 性),matrix(颜色矩阵)
dropShadowFilter : Object – 应用阴影滤镜,需要传递一个具有下列(一个或多个)属性的对象做为参数:alpha, angle(角度), blurX, blurY, color, distance(距离), strength, quality
bevelFilter : Object – 应用斜角滤镜,需要传递一个具有下列(一个或多个)属性的对象做为参数:angle, blurX, blurY, distance, highlightAlpha(高亮区的透明度),
highlightColor(高亮区的颜色),shadowAlpha(阴影区的透明度), shadowColor(阴影区的颜色), strength(强度), quality
关键属性
progress : Number (范围0 – 1,为 0 表示缓还未开始,0.5 缓动进行了一半,1 缓动结束)
paused : Boolean (逻辑值)
============================================================
关键方法:
TweenMax.to(target:Object, duration:Number, vars:Object):TweenMax
TweenMax.from(target:Object, duration:Number, vars:Object):TweenMax
TweenMax.allTo(targets:Array, duration:Number, vars:Object):Array
TweenMax.allFrom(targets:Array, duration:Number, vars:Object):Array
TweenMax.sequence(target:Object, tweens:Array):Array
TweenMax.getTweensOf(target:Object):Array
TweenMax.isTweening(target:Object):Boolean
TweenMax.getAllTweens():Array
TweenMax.killAllTweens(complete:Boolean):void
TweenMax.killAllDelayedCalls(complete:Boolean):void
TweenMax.pauseAll(tweens:Boolean, delayedCalls:Boolean):void
TweenMax.resumeAll(tweens:Boolean, delayedCalls:Boolean):void
pause():void
resume():void
===========================================================================
示例:
对 MovieClip 进行连续的缓动,先用2秒钟时间让透明度降到 50%,然后用1秒钟时间滑落到 y 坐标为300的位置,使用如下的代码:
import gs.TweenMax;
TweenMax.sequence(clip_mc, [{time:2, alpha:0.5}, {time:1, y:300}]);
使用 Back.easeOut 函数对影片剪辑 clip_mc 进行缓动,缓动持续 5秒钟,alpha 值变到 0.5,x 坐标变到 120,延迟 2秒钟执行,缓动结束后,调用“onFinishTweenusing”,并且为这个函数传递几个参数(数值5 和 对 clip_mc 的引用),代码如下:
import gs.TweenMax;
import fl.motion.easing.Back;
TweenMax.to(clip_mc, 5, {alpha:0.5, x:120, ease:Back.easeOut, delay:2, onComplete:onFinishTween, onCompleteParams:[5, clip_mc]});
function onFinishTween(argument1:Number, argument2:MovieClip):void {
trace("The tween has finished! argument1 = " + argument1 + ", and argument2 = " + argument2);
}
如果舞台上的影片剪辑已经处于期望的缓动结束时位置,而你希望它从其它位置用 5 秒钟的时间回到当前位置,(比如从比当前位置高 100 像素或屏幕外更高的地方,通过改变 y 属性,下落到当前位置)可以使用下面的代码:
import gs.TweenMax;
import fl.motion.easing.Elastic;
TweenMax.from(clip_mc, 5, {y:"-100", ease:Elastic.easeOut});
=================================================================
备注
给参数值加上引号,表示对指定的属性进行相应操作。比如,使用 TweenMax.to(mc, 2, {x:"-20"}); 它将 mc.x 向左移动 20 像素,与此相同效果的代码是:
TweenMax.to(mc, 2, {x:mc.x - 20});
可以对任何 MovieClip 使用 “volume” 缓动,就比如:
TweenMax.to(myClip_mc, 1.5, {volume:0});
可以将 MovieClip 缓动成某种色调或颜色,使用 “tint” 属性,比如:
TweenMax.to(myClip_mc, 1.5, {tint:0xFF0000});
想要对数组内容进行缓动,将数值放到一个叫 endArray 的数组中即可,例如:
var myArray:Array = [1,2,3,4];
TweenMax.to(myArray, 1.5, {endArray:[10,20,30,40]});
可以在任何时候终止缓动,使用 TweenMax.killTweensOf(myClip_mc); 函数。如果想强制终止缓动,可以传递一个 true 做为第二个参数,比如
TweenMax.killTweensOf(myClip_mc, true);
去除延迟回调函数,用 TweenMax.killDelayedCallsTo(myFunction_func); 这项功能可以用来控制回调函数的优先级。
使用 TweenMax.from() 方法,可以使目标对象运动回它所在的位置。比如,你可以将对象在舞台上摆放整齐(缓动结束时的位置),然后利用缓动,让它们跑到那个位置上去,你可以将缓 动初始位置的 x 或 y 或 alpha (或者其它你需要的属性)当做参数传递给这个方法函数。
TweenMax参数用法中文介绍的更多相关文章
- TweenLite参数用法中文介绍
TweenLite是一个缓动的类包,功能强大,并且易于使用,为了更多的(E文欠佳的.初学的)朋友了解它,使用它,特此翻译了一下TweenLite类文档中的说明文件,主要是对参数的说明,希望对大家有用. ...
- jQuery中$.fn的用法示例介绍
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 如扩展$.fn.abc(),即$.fn.abc()是对jquery ...
- GET请求参数为中文时乱码分析
问题描述 近期做任务时,跟后端联调时遇到一个问题,前端发送get请求,当参数值有中文时,请求失败,请求参数变为乱码.(ps:一般当参数有中文时,很少使用get请求,而是使用post请求来传输数据,请求 ...
- Struct2 向Action中传递参数(中文乱码问题)
就是把视图上的值传递到Action定义的方法中 也就是把数据从前台传递到后台 三种方式: 1. 使用action属性接收参数 比如jsp页面: <body> 使用action属性接收参数 ...
- Zigbee2007协议中文介绍
Zigbee2007中文介绍ZigBee2007规范定义了ZigBee和ZigBee Pro两个特性集,全新的ZigBee 2007规范建立在ZigBee2006之上,不但提供了增强型的功能而且在某些 ...
- Jenkins高级用法 - Jenkinsfile 介绍及实战经验
系列目录 1.Jenkins 安装 2.Jenkins 集群 3.Jenkins 持续集成 - ASP.NET Core 持续集成(Docker&自由风格&Jenkinsfile) 4 ...
- DAX/PowerBI系列 - 查询参数用法详解(Query Parameter)
PowerBI - 查询参数用法详解(Query Parameter) 很多人都不知道查询参数用来干啥,下面总结一下日常项目中常用的几个查询参数的地方.(本人不太欢hardcode的东西) 使用查询 ...
- 关于swagger-ui 参数为中文的时候,后端乱码
项目中用swagger-ui来测试接口,但是发现,参数是中文的时候,后台接收的时候会出现乱码. 不得改用postman,就没事了, 立贴求助,希望有人可以说下这个怎么配置. 后面发现是后端的编码过滤器 ...
- 【C#】POST请求参数含中文,服务器解析得到乱码
问题:POST请求参数含有中文,已将含中文的string以UTF-8编码格式转为byte[],并写入到请求流中,但服务器收到数据后以UTF-8解码,得到的依然是乱码! 百度到了以下方法,但依然无法解决 ...
随机推荐
- Linux 系统管理——引导过程与服务控制
一. 系统引导流程 1.开机自检(BIOS)(基本的输入输出系统) 2.MBR引导1.2. MBRIS 当从本机硬盘中启动系统时,首先根据硬盘第一个扇区中MBR (Master Boot Record ...
- 54、Spark Streaming:DStream的transformation操作概览
一. transformation操作概览 Transformation Meaning map 对传入的每个元素,返回一个新的元素 flatMap 对传入的每个元素,返回一个或多个元素 filter ...
- LOJ6609 无意识的石子堆【加强版】【容斥原理,计数】
题目描述:在一个\(n\times m\)的网格中,放\(2n\)个棋子,使每一行和每一列都不超过两个棋子.求方案数\(\mathrm{mod} \ 943718401\). 数据范围:\(n\le ...
- MongoDB 关系型数据库表(集合)与表(集合)之间的几种关系
简述关系数据库中表与表的 3 种关系 一对一的关系:例如:一个人对应一个唯一的身份证号,即为一对一的关系. 一对多关系 :例如:一个班级对应多名学生,一个学生只能属于一个班级,即为一对多关系 多对多关 ...
- 差分形式的牛顿插值法(c++)
本程序对cosx函数进行插值,取步长为0.1,因此x的值为0.00,0.10,0.20,0.30,对应的y值为cos(0.00),cos(0.10),cos(0.20),cos(0.30),其实本程序 ...
- Remind Me
创建2d人物:live2d 创建3d人物:adobe fuse
- 剑指offer:构建乘积数组
题目描述: 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1]. ...
- ES6继承小实例
ES6继承小实例 一.总结 一句话总结: js中的类和继承可以多用es6里面的,和其它后端语言的使用方法一样 class Animal { constructor(name) { this.name ...
- Java_jdbc 基础笔记之十四 数据库连接(元数据)数据库信息及连接信息
public class MetaDatatest { /** * DatabaseMetaData 是描述 数据库的元数据对象 可以由Connection得到 */ @Test public voi ...
- Bi-Directional ConvLSTM U-Net with Densley Connected Convolutions
Bi-Directional ConvLSTM U-Net with Densley Connected Convolutions ICCV workshop 2019 2019-09-15 11 ...