TweenLite TweenMax 中文学习笔记

前不久TweenMax版本升级了。现在来好好的学习一下:
帮助文档:http://www.greensock.com/as/docs/tween/_tweenmax.html
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;
}
}
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/hu36978/archive/2009/11/02/4755037.aspx
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)外,一般用默认模式。
还有三种模式 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运动
下面是具体的代码:
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 variable, cast it as a String like this:
TweenLite.to(mc, 1, {x:String(myVariable)});
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/hu36978/archive/2009/11/02/4759525.aspx

前不久TweenMax版本升级了。现在来好好的学习一下:帮助文档:http://www.greensock.com/as/docs/tween/_tweenmax.html

 

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;}
}
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/hu36978/archive/2009/11/02/4755037.aspx
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)外,一般用默认模式。
还有三种模式 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运动
下面是具体的代码:
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秒时刻增加标签 spinmyTimeline.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)});
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/hu36978/archive/2009/11/02/4759525.aspx

posted @ 2010-06-13 12:40  rob_2010  阅读(1312)  评论(0编辑  收藏  举报