TweenMax可能是很多人都用的,包括我···
但是最近发现大量的运用就总会产生这样或那样的"怪事",有时用代码来做缓动有时又用TweenMax造成了代码的 混乱,而且除了单调的TweenMax.to()等几个函数外,貌似还有很多这样那样fun stuffs。对于动画ease的控制,自己除了一个Back就不知道其他了。
总之一片惨淡···
所以趁着这个机会好好总结一下:
一,主要代码结构:
com.greensock包里面,首先最主要的就是TweenMax.as;然后一个常用的是 com.greensock.easing.*;里面包含了15个缓动,下文再一一介绍;另外一个是 com.greensock.events.TweenEvent,不过感觉不太常用;
每一个TweenMax方法大多都会返回一个TweenMax的实例 -- 即下文所说的TweenMax Object。一个TweenMax需要三个参数,即 $target:Object, $duration:Number, $vars:Object ,头两个即运动物体,时间,第三个参数保存了所有的参数。
二,TweenMax主类:
这里分几个大块来介绍,分别是:第三个参数特有属性(29个),PlugIn(17个),公共属性(10个),公共方法(20个)。
1,第三个参数特有属性(29个):
这29个参数可以直接传入第三个OBJECT参数中,不会增加文件的大小。
(1) delay : Number: 延迟开始,在TweenMax动画开始前延迟的秒数。
(2) useFrames : Boolean: 当设置为True时,对这个TweenMax Object的时间计算方式就是基于帧frame的。
(3) ease : Function: 缓动方式。可以使用com.greensock.easing包下的缓动函数。
(4) easeParams : Array: 缓动函数参数。某些缓动函数需要传入一些参数来进行额外的控制。
(5) onInit : Function: 初始化函数。在TweenMax开始前,所有参数还没被传入TweenMax Object时触发。可以用来初始化运动对象的状态。
(6) onInitParams : Array: 初始化函数参数。
(7) onStart : Function: 开始函数。跟初始化函数不同,开始函数在TweenMax Object的值改变之后才触发,而且不同于初始化函数。开始函数可以被触发多次。
(8) onStartParams : Array: 开始函数参数。
(9) onUpdate : Function: 更新函数。当每次TweenMax Object数值更新的时候触发。
(10) onUpdateParams : Array: 更新函数参数。
(11) onComplete : Function: 完成函数。当TweenMax Object完成缓动后触发。
(12) onCompleteParams : Array: 完成函数参数。
(13) onReverseComplete : Function: 回放完成函数。当TweenMax Object处于回放状态,并且回到起点时触发。
(14) onReverseCompleteParams : Array: 回放完成函数参数。
(15) onRepeat : Function: 重放函数。当TweenMax Object每次重放的时候触发。
(16) onRepeatParams : Array: 重放函数参数。
(17) immediateRender : Boolean: 立即渲染。一般来说,TweenMax Object会在下一个渲染周期(也就是下一帧)被渲染到场景中。如果想强制立即渲染,可以把这个参数设为true。另外如果想阻止一个运动周期为0的运动物体被渲染,也可以把这个参数设为false。
(18) paused : Boolean: 暂停。这个很好理解,设为true时TweenMax Object就会暂停缓动。
(19) reversed : Boolean: 反转。不知道为什么跟说明文档里的不同。我的理解是将TweenMax Object的缓动反过来播放。
(20) overwrite : int: 覆盖处理。定义了当对同一个物体使用TweenMax时发生冲突的处理方法。有6种模式。
模式0:NONE。不做任何处理。性能Excellent。
模式1:ALL_IMMEDIATE。设为该模式的TweenMax Object运动具有最高的优先级,会覆盖掉运动物体之前所有的缓动。新的TweenMax Object创建时覆盖旧的TweenMax Object。性能Excellent。
模式2:AUTO。是TweenMax的默认模式(原来我之前的痛苦都是因为它···)。在新的TweenMax Object第一次渲染时覆盖重复的属性(模式1是覆盖掉全部属性)。只要不是具有太多的属性需要覆盖,性能还是不错的。
模式3:CONCURRENT。这个单词的意思是“同时发生”。跟模式1很相似。唯一的不同是他只覆盖掉正在运行的TweenMax Object。而放过其他的没有启动的TweenMax Object。性能Very Good。
模式4:ALL_ONSTART。也是跟模式1非常像。两点不同是他是在TweenMax Object第一次渲染时才覆盖掉其他所有的TweenMax Object,而且这个会把在他之后创建的TweenMax Object也覆盖掉。性能Very Good。
模式5:PREEXISTING。这个单词一看上去很迷糊,其实是pre-existing,囧。唯一的不同是他是在TweenMax Object第一次渲染时才覆盖掉其他所有的TweenMax Object。性能Very Good。
如果想改变全局的TweenMax Object默认overwrite属性,可以调用哪个OverWriteManager类的全局方法init(),即:
OverwriteManager.init(OverwriteManager.XXXX);
(21) repeat : int: 循环次数。设置为-1为无限循环。
(22) repeatDelay : Number: 循环延迟的时间。
(23) yoyo : Boolean:YOYO球。 另外一种循环的方式。像我们玩的YOYO球一样,从头到尾,再从尾到头的往返运动。PS:要与repeat同时设置。
(24) onStartListener : Function: 注册一个TweenEvent的监听,跟开始函数在同一时刻派发。
(25) onUpdateListener : Function: 注册一个TweenEvent的监听,跟更新函数在同一时刻派发。
(26) onCompleteListener : Function: 注册一个TweenEvent的监听,跟完成函数在同一时刻派发。
(27) onReverseCompleteListener : Function: 注册一个TweenEvent的监听,跟回放完成函数在同一时刻派发。
(28) onRepeatListener : Function: 注册一个TweenEvent的监听,跟重放函数在同一时刻派发。
(29) startAt : Object: 重设初始值。一般TweenMax Object使用运动物体的当前状态来做初始值。但是可以使用这个参数重新设置运动物体的初始状态。
2,PlugIn(17个)
PlugIn与"第三个参数特有属性"其实是同一样东西。所不同的是他会显着增加生成文件的大小。所有PlugIn 都关闭的情况下TweenMax的大小为8.8k(TweenLite为4k)。当所有的PlugIn都使用后(包括收费的)TweenMax会膨胀到 25.9k。(话说回来怎么关闭我也不清楚,求指教)
这里介绍的是TweenMax文档里提到的17个PlugIn(我看了包里面竟然有30个,囧···不管他)。
(1) autoAlpha : Number: 跟alpha几乎一样,不同的是他在alpha==0时会自动将visible也设为false,而在alpha>0时将visible设为true。
(2) visible : Boolean: 在TweenMax Object的最后设置物体的visible属性。
(3) volume : Number: 缓动音量的。需要运动物体有soundTransform属性,例如MovieClip,SoundChannel,NetStream等。
(4) tint : Number: 颜色。将整个运动物体变成对应的颜色。可以使用十六进制值。
(5) removeTint : Boolean: 设为true时,去掉已经使用的tint属性。
(6) frame : Number: 当运动物体是MovieClip时,缓动内部的时间轴。
(7) bezier : Array: 贝塞尔曲线。这个有点不清楚,好像数组里的奇数个点(Object{x:xxx,y:xxx})为贝塞尔曲线的控制点,偶数个点为运动的终点。
(8) bezierThrough : Array: 比贝塞尔曲线更直观,数组里奇数的点为曲线中要穿过的点。
(9) orientToBezier : Array (or Boolean):指向运动。一个比较常用的功能是在进行曲线运动时,物体的朝向一般要对应运动的方向(例如汽车之类的运动)。对于2D可以简单的传值 true。对于3D或者需要更多的灵活性,可以传入数组4个参数,x,y,rotation,需要增加的度数, 注:头3个参数不是具体的数值,而是需要变化的参数,头两个是位置属性,第三个是旋转参数,第四个参数为可选。
(10) hexColors : Object: 16进制缓动。 TweenMax在对16进制数进行缓动时会有不平滑的现象出现,这是就需要使用hexColors参数进行缓动。hexColors参数是一个对象,所 以需要把要进行缓动的参数传入其中,即:TweenMax.to(target,2,{hexColors:{mcParas:newColor}});其中mcParas是target的属性,newColor是要缓动到的新的16进值。
(11) shortRotation : Object: 短旋转。用这个代替rotation的话,TweenMax会自动按最短的旋转方向来进行旋转,而不是按照AS3默认的以逆时针方向进行旋转。记得要按Object的方式传入。
(12) roundProps : Array: 取整数。对于想要在变化中始终取整的值,可以把属性的字符形式放到这个数组中。例:TweenMax.to(target,2,{x:200,y:200,roundProps:["x","y"]});
(13) blurFilter:Object: 模糊滤镜。用法:TweenMax.to(target,2,{blurFilter:{blurX:xxx,blurY:xxx}});
(14) glowFilter:Object: 发光滤镜。用法:TweenMax.to(target,2,{glowFilter:{color:0xFFFFFF,blurX:xxx,blurY:xxx}});
(15) colorMatrixFilter:Object: 颜色矩阵滤镜。用法:TweenMax.to(target,2,{colorMatrixFilter:{colorize:0xff0000, amount:1, contrast:1, saturation:1, hue:0}});
(16) dropShadowFilter:Object: 投影滤镜。用法:TweenMax.to(target,2,{dropShadowFilter:{color:0xff0000, alpha:1, blurX:12, blurY:12, distance:12}});
(17) bevelFilter:Object: 斜角滤镜。用法:TweenMax.to(target,2,{bevelFilter:{blurX:10, blurY:10, strength:1, distance:10}});
3,公共属性
TweenMax有10个公共属性。(啊···好简短的介绍)
(1)动画进度
currentProgress : Number
但是最近发现大量的运用就总会产生这样或那样的"怪事",有时用代码来做缓动有时又用TweenMax造成了代码的 混乱,而且除了单调的TweenMax.to()等几个函数外,貌似还有很多这样那样fun stuffs。对于动画ease的控制,自己除了一个Back就不知道其他了。
总之一片惨淡···
所以趁着这个机会好好总结一下:
一,主要代码结构:
com.greensock包里面,首先最主要的就是TweenMax.as;然后一个常用的是 com.greensock.easing.*;里面包含了15个缓动,下文再一一介绍;另外一个是 com.greensock.events.TweenEvent,不过感觉不太常用;
每一个TweenMax方法大多都会返回一个TweenMax的实例 -- 即下文所说的TweenMax Object。一个TweenMax需要三个参数,即 $target:Object, $duration:Number, $vars:Object ,头两个即运动物体,时间,第三个参数保存了所有的参数。
二,TweenMax主类:
这里分几个大块来介绍,分别是:第三个参数特有属性(29个),PlugIn(17个),公共属性(10个),公共方法(20个)。
1,第三个参数特有属性(29个):
这29个参数可以直接传入第三个OBJECT参数中,不会增加文件的大小。
(1) delay : Number: 延迟开始,在TweenMax动画开始前延迟的秒数。
(2) useFrames : Boolean: 当设置为True时,对这个TweenMax Object的时间计算方式就是基于帧frame的。
(3) ease : Function: 缓动方式。可以使用com.greensock.easing包下的缓动函数。
(4) easeParams : Array: 缓动函数参数。某些缓动函数需要传入一些参数来进行额外的控制。
(5) onInit : Function: 初始化函数。在TweenMax开始前,所有参数还没被传入TweenMax Object时触发。可以用来初始化运动对象的状态。
(6) onInitParams : Array: 初始化函数参数。
(7) onStart : Function: 开始函数。跟初始化函数不同,开始函数在TweenMax Object的值改变之后才触发,而且不同于初始化函数。开始函数可以被触发多次。
(8) onStartParams : Array: 开始函数参数。
(9) onUpdate : Function: 更新函数。当每次TweenMax Object数值更新的时候触发。
(10) onUpdateParams : Array: 更新函数参数。
(11) onComplete : Function: 完成函数。当TweenMax Object完成缓动后触发。
(12) onCompleteParams : Array: 完成函数参数。
(13) onReverseComplete : Function: 回放完成函数。当TweenMax Object处于回放状态,并且回到起点时触发。
(14) onReverseCompleteParams : Array: 回放完成函数参数。
(15) onRepeat : Function: 重放函数。当TweenMax Object每次重放的时候触发。
(16) onRepeatParams : Array: 重放函数参数。
(17) immediateRender : Boolean: 立即渲染。一般来说,TweenMax Object会在下一个渲染周期(也就是下一帧)被渲染到场景中。如果想强制立即渲染,可以把这个参数设为true。另外如果想阻止一个运动周期为0的运动物体被渲染,也可以把这个参数设为false。
(18) paused : Boolean: 暂停。这个很好理解,设为true时TweenMax Object就会暂停缓动。
(19) reversed : Boolean: 反转。不知道为什么跟说明文档里的不同。我的理解是将TweenMax Object的缓动反过来播放。
(20) overwrite : int: 覆盖处理。定义了当对同一个物体使用TweenMax时发生冲突的处理方法。有6种模式。
模式0:NONE。不做任何处理。性能Excellent。
模式1:ALL_IMMEDIATE。设为该模式的TweenMax Object运动具有最高的优先级,会覆盖掉运动物体之前所有的缓动。新的TweenMax Object创建时覆盖旧的TweenMax Object。性能Excellent。
模式2:AUTO。是TweenMax的默认模式(原来我之前的痛苦都是因为它···)。在新的TweenMax Object第一次渲染时覆盖重复的属性(模式1是覆盖掉全部属性)。只要不是具有太多的属性需要覆盖,性能还是不错的。
模式3:CONCURRENT。这个单词的意思是“同时发生”。跟模式1很相似。唯一的不同是他只覆盖掉正在运行的TweenMax Object。而放过其他的没有启动的TweenMax Object。性能Very Good。
模式4:ALL_ONSTART。也是跟模式1非常像。两点不同是他是在TweenMax Object第一次渲染时才覆盖掉其他所有的TweenMax Object,而且这个会把在他之后创建的TweenMax Object也覆盖掉。性能Very Good。
模式5:PREEXISTING。这个单词一看上去很迷糊,其实是pre-existing,囧。唯一的不同是他是在TweenMax Object第一次渲染时才覆盖掉其他所有的TweenMax Object。性能Very Good。
如果想改变全局的TweenMax Object默认overwrite属性,可以调用哪个OverWriteManager类的全局方法init(),即:
OverwriteManager.init(OverwriteManager.XXXX);
(21) repeat : int: 循环次数。设置为-1为无限循环。
(22) repeatDelay : Number: 循环延迟的时间。
(23) yoyo : Boolean:YOYO球。 另外一种循环的方式。像我们玩的YOYO球一样,从头到尾,再从尾到头的往返运动。PS:要与repeat同时设置。
(24) onStartListener : Function: 注册一个TweenEvent的监听,跟开始函数在同一时刻派发。
(25) onUpdateListener : Function: 注册一个TweenEvent的监听,跟更新函数在同一时刻派发。
(26) onCompleteListener : Function: 注册一个TweenEvent的监听,跟完成函数在同一时刻派发。
(27) onReverseCompleteListener : Function: 注册一个TweenEvent的监听,跟回放完成函数在同一时刻派发。
(28) onRepeatListener : Function: 注册一个TweenEvent的监听,跟重放函数在同一时刻派发。
(29) startAt : Object: 重设初始值。一般TweenMax Object使用运动物体的当前状态来做初始值。但是可以使用这个参数重新设置运动物体的初始状态。
2,PlugIn(17个)
PlugIn与"第三个参数特有属性"其实是同一样东西。所不同的是他会显着增加生成文件的大小。所有PlugIn 都关闭的情况下TweenMax的大小为8.8k(TweenLite为4k)。当所有的PlugIn都使用后(包括收费的)TweenMax会膨胀到 25.9k。(话说回来怎么关闭我也不清楚,求指教)
这里介绍的是TweenMax文档里提到的17个PlugIn(我看了包里面竟然有30个,囧···不管他)。
(1) autoAlpha : Number: 跟alpha几乎一样,不同的是他在alpha==0时会自动将visible也设为false,而在alpha>0时将visible设为true。
(2) visible : Boolean: 在TweenMax Object的最后设置物体的visible属性。
(3) volume : Number: 缓动音量的。需要运动物体有soundTransform属性,例如MovieClip,SoundChannel,NetStream等。
(4) tint : Number: 颜色。将整个运动物体变成对应的颜色。可以使用十六进制值。
(5) removeTint : Boolean: 设为true时,去掉已经使用的tint属性。
(6) frame : Number: 当运动物体是MovieClip时,缓动内部的时间轴。
(7) bezier : Array: 贝塞尔曲线。这个有点不清楚,好像数组里的奇数个点(Object{x:xxx,y:xxx})为贝塞尔曲线的控制点,偶数个点为运动的终点。
(8) bezierThrough : Array: 比贝塞尔曲线更直观,数组里奇数的点为曲线中要穿过的点。
(9) orientToBezier : Array (or Boolean):指向运动。一个比较常用的功能是在进行曲线运动时,物体的朝向一般要对应运动的方向(例如汽车之类的运动)。对于2D可以简单的传值 true。对于3D或者需要更多的灵活性,可以传入数组4个参数,x,y,rotation,需要增加的度数, 注:头3个参数不是具体的数值,而是需要变化的参数,头两个是位置属性,第三个是旋转参数,第四个参数为可选。
(10) hexColors : Object: 16进制缓动。 TweenMax在对16进制数进行缓动时会有不平滑的现象出现,这是就需要使用hexColors参数进行缓动。hexColors参数是一个对象,所 以需要把要进行缓动的参数传入其中,即:TweenMax.to(target,2,{hexColors:{mcParas:newColor}});其中mcParas是target的属性,newColor是要缓动到的新的16进值。
(11) shortRotation : Object: 短旋转。用这个代替rotation的话,TweenMax会自动按最短的旋转方向来进行旋转,而不是按照AS3默认的以逆时针方向进行旋转。记得要按Object的方式传入。
(12) roundProps : Array: 取整数。对于想要在变化中始终取整的值,可以把属性的字符形式放到这个数组中。例:TweenMax.to(target,2,{x:200,y:200,roundProps:["x","y"]});
(13) blurFilter:Object: 模糊滤镜。用法:TweenMax.to(target,2,{blurFilter:{blurX:xxx,blurY:xxx}});
(14) glowFilter:Object: 发光滤镜。用法:TweenMax.to(target,2,{glowFilter:{color:0xFFFFFF,blurX:xxx,blurY:xxx}});
(15) colorMatrixFilter:Object: 颜色矩阵滤镜。用法:TweenMax.to(target,2,{colorMatrixFilter:{colorize:0xff0000, amount:1, contrast:1, saturation:1, hue:0}});
(16) dropShadowFilter:Object: 投影滤镜。用法:TweenMax.to(target,2,{dropShadowFilter:{color:0xff0000, alpha:1, blurX:12, blurY:12, distance:12}});
(17) bevelFilter:Object: 斜角滤镜。用法:TweenMax.to(target,2,{bevelFilter:{blurX:10, blurY:10, strength:1, distance:10}});
3,公共属性
TweenMax有10个公共属性。(啊···好简短的介绍)
(1)动画进度
currentProgress : Number