文章内容

2016/12/28 16:48:43,作 者: 黄兵

Tweenmax 各种缓动

1,Linear变化
字面意思就很好理解,线性变化,就是匀速。


 2,Back变化。
Back有回来的意思,在缓动前,会先往回运动一段距离。


 3,Bounce变化。
顾名思义,在变化前会几次回归原点,好像在弹一样。


 4,Circ变化。
运动的曲线是一个圆形的弧度。


 5,Cubic变化。
跟圆形变化差不多,不过更平滑些。


 6,Elastic变化
跟Back变化有点像,但是会有一个很强的波动。在EaseIn和EaseOut时尤为明显。


 7,Expo变化
一直很平缓,在最后一点完成所有变化。


8,Quad变化


9,Quart变化。



10,Quint变化


11,Sine正弦变化


12,Strong变化。
以上是12种内置的变化,所以准确来说是有36种的,那剩下的4个类是做什么的呢。

 13,EaseLookup

包含一个静态方法fine(),可以通过字符串String直接取得ease的实例。方便一些反射操作的需要。例:

TweenMax.to(ball, 1, { x:200,ease:EaseLookup.find("backEaseInOut") } );

14,FastEase

AS3的TweenMax版本有内置的算法可以加速缓动效果。需要用这个类的静态方法activate()手动打开。可以提高35%~80%的缓动计算,提高2%~15%的整个缓动效率。

可以被加速的缓动变化包括:Linear Quad Cubic Quart Quint Strong这六种而已。打开方法,例:

FastEase.activate([Strong, Linear, Quad]);

还有另外一个静态方法activateEase(ease:Function, type:int, power:uint):void,是用来把这种优化方法用在非com.greensock的缓动上的,例如用在AS3自带的缓动类。

15,RoughEase

RoughEase(strength:Number = 1, points:uint = 20, restrictMaxAndMin:Boolean = false, templateEase:Function = null, taper:String = "none", randomize:Boolean = true, name:String = "")

通常的缓动变化都是很平滑的,如果想要一个不平滑的效果,就可以使用RoughEase。

这里列出的是他的构造方法,其中:

strength:Number:随机点的幅度。

points:uint:随机点的数量。

restrictMaxAndMin:Boolean:当设为true时,随机数的变化会在初始值和终点值之间波动。当为false时,随机数的变化可能会超过这个区间。

templateEase:Function:随机点作用的缓动模板。默认是Linear.easeNone。

taper:String:随机变化趋向那一端,"in”的话趋向于起点,"out"的话趋向于终点。默认是"none"。

randomize:Boolean:设为true时,缓动位置将会随机变化。如果为false时,缓动位置将会锯齿型变化。

name:String :为roughEase实例命名,这样以后可以使用静态方法byName()获取引用。

用法:

例1,直接使用:

TweenLite.to(ball, 2, {y:0, ease:RoughEase.create(1, 20, true, Bounce.easeInOut)});

例2,生成实例调用:

var _roughEase:RoughEase = new RoughEase(1,20,true, Strong.easeOut, "none", true, "superRoughEase");

然后直接调用:

TweenLite.to(mc, 3, {y:300, ease:rough.ease});

或者:

TweenLite.to(mc, 3, {y:300, ease:RoughEase.byName("superRoughEase")});

16,CustumEase

自建缓动效果。基本不能直接编写。例:

创建:

CustomEase.create("myCustomEase", [{s:0,cp:0.814,e:0.908},{s:0.908,cp:1.002,e:0.376},{s:0.376,cp:-0.25,e:1}]);

使用:

TweenMax.to(mc, 2, {x:"250", ease:CustomEase.byName("myCustomEase")});


转自:豆瓣读书

图集
TweenMax示例代码
分享到:

发表评论

评论列表