[心得] TweenLite TweenMax 中文学习笔记

最近小研究下了缓动 效果，虽然没有研究出什么成果来不过发现一些高手的笔记，希望大家看过之后能做出绚丽的效果来。
　　TweenLite.to(mc, 1.5, {x:100}); 里面的mc指所作用的对象,1.5指运动的时间，{x:100} 表示mc的x属性变化，最终停下来时x的值为100. (即mc从当前位置,经过1.5秒，匀速 移动到x=100的位置)　

    TweenLite.from(mc, 1.5, {x:100}) 里面的mc指所作用的对象,1.5指运动的时间, 这里是指，mc从当前位置,经过1.5秒， 从x=100的位置移动到当前mc所在的位置。“注意与上面的区别，他们恰好相反”)

　　下面我们以上面的TweenLite.to() 来讲解相关属性：

　　TweenLite.to() TweenLite.from() 返回的都是TweenLite类型

　　TweenLite.to(mc, 1.5, {x:100});我们还可以在{}里加些其他相关的属性

　　下面假如 delay属性 其表示 延迟delay时间后才发生Tween :

　　TweenLite.to(mc, 1, {x:100, delay:2}); 表示执行TweenLite.to(mc, 1, {x:100, delay:2})后，需要经过2秒，mc才发生移动

　　我们还可以在{}加入alpa ease(缓动) onComplete(所调用的方法名)等属性：

　　TweenLite.to(mc, 1.5, {x:100, ease:Elastic.easeOut, delay:0.5, onComplete:myFunction});

　　 function myFunction():void {

　　trace("tween finished");}

　　上面的 ease:Elastic.easeOut是缓动类的一种类型 onComplete:myFunction 表示tween执行完后就会调用myFunction方法(即执行完Tween后，紧接着就调用myFunction方法，)。

　　TweenLite还有一方法，如：pause(), resume(), reverse(), restart())

　　pause() 表示暂停 。resume() 表示继续播放缓动。restart()表示重头开始播放缓动。 reverse()表示按与原方向相反的方向缓动(例如：缓动了2秒后，调用该方法，就会经过相同的时间(2秒)按原路返回)。

　　下面是一个对各个属性进行验证的小例子：

　　start_btn是开始 按钮，即按下它才会执行缓动

　　btn 按钮是对一些方法的验证 ，你可以改变里面的相关方法进行验证 如将 tween.reverse();改成tween.resume();
　　import com.greensock.*;

　　import com.greensock.easing.*;

　　var isPause:Boolean;

　　var tween:TweenLite;

　　btn.enabled=false;

　　start_btn.addEventListener(MouseEvent.CLICK,begin);

　　btn.addEventListener(MouseEvent.MOUSE_DOWN,onDown);

　　function begin(e:MouseEvent) {

　　btn.enabled=true;

　　tween=TweenLite.from(mc,10,{x:300,y:300,alpha:0.5,delay:2,onComplete:completeIt});

　　}

　　function completeIt() {

　　trace("缓动执行完毕，开始调用此方法");

　　trace(tween);//TweenLite类型

　　}

　　function onDown(e:Event):void {

　　if (isPause==false) {

　　tween.pause();

　　isPause=true;

　　} else {

　　tween.reverse();

　　isPause=false;

　　}

　　}

　　overwrite属性 ： 默认值是 2 即 auto

　　一般用法：

　　TweenLite.to(mc, 1, {x:100, overwrite:2}); //推荐 使用这种， 2 代表的是模式2 即AUTO (2) 模式 其也是默认值

　　// 或者

　　TweenLite.to(mc, 1, {x:100, overwrite:true});

　　overwrite属性来自 OverwriteManager 类

　　其有五种模式

　　0 : 速度最快的模式

　　1： 适合按钮使用的模式 ,按钮发生 roll_over/roll_out 事件

　　2 ：默认模式 。除了无速度(选择0)要求，和作用对象为按钮(选择2)外，一般用默认模式。

　　在使用模式时 ，需要初始化 即：

　　OverwriteManager.init(2) // 里面的模式2 只是起个初始化作用，你可以将其修改为其他的模式，但是上面的初始化必不可少，否则无效(无效则用默认模式2) 。

　　模式修改是在overwrite里进行的。

　　例如：

　　OverwriteManager.init(2) //初始化

　　//修改

　　TweenLite.to(btn, 1, {x:100, overwrite:1});//初始化模式为2，现在修改为1

　　TweenLite和TweenMax的比较

　　使用TweenLite，编译后 文件较小，假如对文件大小有要求的话，推荐使用这种。

　　使用TweenMax，编译后文件较大 ，该类，功能很多，编译后文件较大。

　　他们的用法相似：

　　TweenLite.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut});

　　TweenMax.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut});

　　使用 TimelineLite

　　可以将其 TimelineLite看成MovieClip

　　它的作用是控制tween的运动，其当我们需要mc的运动一个接着一个

　　例子:

　　var myTimeline:TimelineLite = new TimelineLite();

　　myTimeline.append( new TweenLite(mc, 1, {x:100}) );//添加进myTimeline

　　myTimeline.append( new TweenLite(mc, 1, {y:200}) );

　　myTimeline.append( new TweenMax(mc, 1, {tint:0xFF0000}) );

　　上面的 代码的结果是： mc首先移到x=100处，然后移动到y=200处，最后颜色发生渐变，渐变到0xFF0000

　　它们的运动是一个接着一个进行。

　　下面是一个下例子 ， 测试，例子，并没有发生tween运动，当 鼠标滑上和滑下按钮menu时执行tween运动

　　故我们控制刚测试时不运动 即： var myTimeline:TimelineLite = new TimelineLite({paused:true});

　　这样开始时就不发生tween运动了。TimelineLite的属性方法和TweenLite很多一样。

　　var tween = new TweenLite({paused:true});//这样开始时也是不发生tween运动

　　下面是具体的代码：

　　var myTimeline:TimelineLite = new TimelineLite({paused:true});

　　myTimeline.append( new TweenLite(mc, 1, {x:100}) );

　　myTimeline.append( new TweenLite(mc, 1, {y:200}) );

　　myTimeline.append( new TweenMax(mc, 1, {tint:0xFF0000}) );

　　menu.addEventListener(MouseEvent.ROLL_OVER, overHandler);

　　menu.addEventListener(MouseEvent.ROLL_OUT, outHandler);

　　function overHandler(event:MouseEvent):void {

　　myTimeline.play();

　　}

　　function outHandler(event:MouseEvent):void {

　　myTimeline.reverse();

　　}

　　测试显示，只有滑上和滑出menu按钮发生运动

　　除此之外，我们还可以在某个时刻或者某个标签插入tween运动，用到的方法是TimelineLite的insert()方法。

　　我们还可用TimelineLite的addlabel() 给某个时刻插入标签。

　　append() 的第二个参数offset表示上一个tween过后，在过offset时间执行本tween运动

　　例子：
　　var myTimeline:TimelineLite = new TimelineLite();

　　//在时刻为1秒的地方插入 tween运动，即第一秒结束后才运动

　　myTimeline.insert( new TweenLite(mc, 2, {x:100}), 1);

　　//提前1.5秒发生tween运动

　　myTimeline.append( new TweenLite(mc, 1, {y:200}), -1.5);

　　// 为4秒时刻增加标签 spin

　　myTimeline.addLabel("spin", 4);

　　//在spin标签处添加tween 动画

　　myTimeline.insert( new TweenLite(mc, 1, {rotation:"360"}), "spin");

　　我们也可对多个运动同时进行运动

　　myArrayOfSprites是运动对象mc的数组

　　myTimeline.insertMultiple( TweenMax.allFrom(myArrayOfSprites, 1, {y:"-100", autoAlpha:0}) );

　　TweenLite.delayedCall(2, myFunction, [myParam1, myParam2]); //表示经过2秒后执行myFunction()方法，[myParam1, myParam2是该方法的参数

　　TweenLite.to(mc, 1, {x:"100"});//在原坐标的基础上增加100像素注意与x:100的区别

　　//or if the value is in a va riable, cast it as a String like this:

　　TweenLite.to(mc, 1, {x:String(myVariable)});