TweenLite&&TweenMax系列(二)

 

overwrite属性  ： 默认值是 2   即 auto

 

 

一般用法：

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

// 或者

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

 

overwright 属性来自 OverwriteManager 类

其有五种模式

 0 : 速度最快的模式

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

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

还有三种模式 3，4，5详细介绍:  http://blog.greensock.com/overwritemanager/

 

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

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运动

 

下面是具体的代码：

 

1. var myTimeline:TimelineLite = new TimelineLite ( {paused: true } );
2. myTimeline. append ( new TweenLite (mc, 1, {x: 100 } ) );
3. myTimeline. append ( new TweenLite (mc, 1, {y: 200 } ) );
4. myTimeline. append ( new TweenMax (mc, 1, {tint:0xFF0000 } ) );
5.  
6. menu. addEventListener (MouseEvent. ROLL_OVER, overHandler );
7. menu. addEventListener (MouseEvent. ROLL_OUT, outHandler );
8.  
9. function overHandler (event:MouseEvent ): void {
10.     myTimeline. play ( );
11. }
12.  
13. function outHandler (event:MouseEvent ): void {
14.     myTimeline. reverse ( );
15. }

测试显示，只有滑上和滑出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 variable, cast it as a String like this:

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