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 :
1 TweenLite.to(mc, 1, {x:100, delay:2}); 2 //表示需要经过2秒,mc才执行发生移动
我们还可以在{}加入alpha、 ease(缓动) onComplete(所调用的方法名)等属性:
1 TweenLite.to(mc, 1.5, {x:100, ease:Elastic.easeOut, delay:0.5, onComplete:myFunction}); 2 function myFunction():void 3 { 4 trace("tween finished"); 5 } 6 7 /*上面的 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();
1 import com.greensock.*; 2 import com.greensock.easing.*; 3 var isPause:Boolean; 4 var tween:TweenLite; 5 btn.enabled = false; 6 start_btn.addEventListener(MouseEvent.CLICK,begin); 7 btn.addEventListener(MouseEvent.MOUSE_DOWN,onDown); 8 function begin(e:MouseEvent) 9 { 10 btn.enabled = true; 11 tween = TweenLite.from(mc,10,{x:300,y:300,alpha:0.5,delay:2,onComplete:completeIt}); 12 } 13 function completeIt() 14 { 15 16 trace("缓动执行完毕,开始调用此方法"); 17 trace(tween); 18 //TweenLite类型 19 20 } 21 22 function onDown(e:Event):void 23 { 24 if (isPause==false) 25 { 26 tween.pause(); 27 isPause = true; 28 } 29 else 30 { 31 tween.reverse(); 32 isPause = false; 33 } 34 35 }
onComplete : Function – 缓动结束时执行的函数。
onCompleteParams : Array – 给 onComplete 参数指定的函数传递参数 (可选的)
stageBallDowntween = TweenLite.to(nowStageDownBall,ballDownPerTime*(2-getSamePipOtherBallInfo_arr[1]),{rotation:360,x:e.target.x,y:e.target.y-stageBallHeight*getSamePipOtherBallInfo_arr[1],onComplete:completeIt,onCompleteParams:[]});
TweenLite可选属性:overwrite
overwrite属性 : 默认值是 2 即 auto
一般用法:
1 TweenLite.to(mc, 1, {x:100, overwrite:2}); 2 //推荐 使用这种, 2 代表的是模式2 即AUTO模式 也是默认值 3 4 // 或者 5 6 TweenLite.to(mc, 1, {x:100, overwrite:true});
//在使用模式时 ,需要初始化 即: OverwriteManager.init(2) /* 里面的模式2 只是起个初始化作用, 你可以将其修改为其他的模式,但是上面的初始化必不可少,否则无效(无效则用默认模式2) 。 模式修改是在overwrite里进行的。*/ //例如: OverwriteManager.init(2) //初始化 TweenLite.to(btn, 1, {x:100, overwrite:1}); //初始化模式为2,现在修改为1
1 TweenLite.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut}); 2 TweenMax.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut});
1 var myTimeline:TimelineLite = new TimelineLite(); 2 myTimeline.append( new TweenLite(mc, 1, {x:100}) ); 3 //添加进myTimeline; 4 myTimeline.append( new TweenLite(mc, 1, {y:200}) ); 5 myTimeline.append( new TweenMax(mc, 1, {tint:0xFF0000}) );
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 { 11 myTimeline.play(); 12 } 13 14 function outHandler(event:MouseEvent):void 15 { 16 myTimeline.reverse(); 17 }
1 var myTimeline:TimelineLite = new TimelineLite(); 2 3 //在时刻为1秒的地方插入 tween运动,即第一秒结束后才运动 4 myTimeline.insert( new TweenLite(mc, 2, {x:100}), 1); 5 //提前1.5秒发生tween运动; 6 myTimeline.append( new TweenLite(mc, 1, {y:200}), -1.5); 7 // 为4秒时刻增加标签 spin; 8 myTimeline.addLabel("spin", 4); 9 10 //在spin标签处添加tween动画; 11 myTimeline.insert( new TweenLite(mc, 1, {rotation:"360"}), "spin");
1 myTimeline.insertMultiple( TweenMax.allFrom(myArrayOfSprites, 1, {y:"-100", autoAlpha:0}) ); 2 3 TweenLite.delayedCall(2, myFunction, [myParam1, myParam2]); 4 /*表示经过2秒后执行myFunction()方法,[myParam1, myParam2是该方法的参数*/ 5 6 7 TweenLite.to(mc, 1, {x:"100"}); 8 //在原坐标的基础上增加100像素 注意与x:100的区别 9 //如果传入的参数是数值,一定要转换为字符串: 10 TweenLite.to(mc, 1, {x:String(myVariable)}); 11 12 13 TweenMax.pauseAll() 14 TweenMax.killAll();
转载修改于:http://blog.sina.com.cn/s/blog_8b7ca01301012d7n.html