ActionScript
TypeScript
JavaScript

创建缓动动画的类:Tween与TimeLine

发布时间:2017-01-20

        LayaAir引擎中有两个可以用于创建缓动动画的类,一个是基础的laya.utils.Tween,另一个是基于Tween的TimeLine。Tween可以创建单个缓动,而TimeLine可以创建一系列的缓动按顺序执行。


一、用Tween创建简单的缓动动画。

示例代码:

package  
{
	import laya.display.Sprite;
	import laya.events.Event;
	import laya.utils.Ease;
	import laya.utils.Tween;
	/**
	 * ...
	 * @author ww
	 */
	public class TweenSample 
	{
		
		public function TweenSample() 
		{
			Laya.init(1000, 900);
			test();
		}
		private var sp0:Sprite;
		private var sp1:Sprite;
		public function test():void
		{
			sp0 = new Sprite();
			sp0.graphics.drawRect(0, 0, 100, 100, "#ff0000");
			Laya.stage.addChild(sp0);
			
			sp1 = new Sprite();
			sp1.graphics.drawRect(0, 0, 100, 100, "#ff0000");
			Laya.stage.addChild(sp1);
			
			Laya.stage.on(Event.CLICK, this, onClick);
		}
		
		private function onClick():void
		{
			sp0.pos(300, 300);
			//缓动到x=500的地方,延迟100ms执行
			Tween.to(sp0, {x:500 }, 1000, Ease.backIn, null, 100);
			
		    sp1.pos(300, 500);
			//从x=500的地方缓动到当前位置,延迟200ms执行
			Tween.from(sp1, {x:500 }, 1000, Ease.backIn, null, 200);
			
		}
	}

}


二、用TimeLine创建连续的多个动画序列。

示例代码:

package  
{
	import laya.display.Sprite;
	import laya.events.Event;
	import laya.utils.Ease;
	import laya.utils.TimeLine;
	import laya.utils.Tween;
	/**
	 * ...
	 * @author ww
	 */
	public class TimeLineSample 
	{
		
		public function TimeLineSample() 
		{	
		    Laya.init(1000, 900);
			test();
		}
		private var sp0:Sprite;
		private var sp1:Sprite;
		public function test():void
		{
			sp0 = new Sprite();
			sp0.graphics.drawRect(0, 0, 100, 100, "#ff0000");
			Laya.stage.addChild(sp0);
			
			sp1 = new Sprite();
			sp1.graphics.drawRect(0, 0, 100, 100, "#ff0000");
			Laya.stage.addChild(sp1);
			
			Laya.stage.on(Event.CLICK, this, onClick);
		}
		
		private function onClick():void
		{
			sp0.pos(300, 300);
			//缓动到x=500的地方,然后进行一系列的缓动
			TimeLine.to(sp0, { x:500 }, 1000, Ease.backIn, 0)
			.to(sp0, { x:300 }, 1000, Ease.backIn, 0)
			.to(sp0, { x:600 }, 1000, Ease.backIn, 0)
			.to(sp0, { x:100 }, 1000, Ease.backIn, 0)
			.play();
			
		    sp1.pos(300, 500);
			//从x=500的地方缓动到当前位置,然后进行一系列的缓动
			TimeLine.from(sp1, { x:500 }, 1000, Ease.backIn, 0)
			.to(sp1, { x:300 }, 1000, Ease.backIn, 0)
			.to(sp1, { x:600 }, 1000, Ease.backIn, 0)
			.to(sp1, { x:100 }, 1000, Ease.backIn, 0)
			.play();
			
		}
		
	}

}