Tweener——模拟抛物线和圆形轨迹

缓动及缓动库 everyinch 2037℃ 0评论

HFL79032

大家知道,二次缓动实际是抛物线的一段。这样可以使用Tweener补间引擎来模拟抛物线的轨迹。首先使用linear类型的补间将目标物体移动到指定的x坐标,假设时间为1。这时将时间分成两个部分,前0.5秒使用二次缓入easeInQuad向上缓动目标物体的y坐标,后0.5秒使用二次缓出easeOutQuad将目标物体的y坐标缓动到原始值。同样,利用easeInSine和easeOutSine可以模拟圆形的轨迹,即使用easeInSine缓动x坐标,easeOutSine缓动y坐标即可。源代码如下:

package{
	import caurina.transitions.Tweener;

	import flash.display.Bitmap;
	import flash.display.Sprite;

	[SWF(width="640",height="480",backgroundColor="0xffffff")]
	public class TweenerCircle extends Sprite{
		private var sp1:Sprite;
		private var sp2:Sprite;

		public function TweenerCircle(){
			Tweener.removeTweens(sp1);
			sp1 = new Sprite();
			sp1.graphics.beginFill(0xff0000);
			sp1.graphics.drawCircle(-10,-10,20);
			sp1.graphics.endFill();
			sp1.x = 50;
			sp1.y = 400;
			addChild(sp1);
			Tweener.addTween(sp1,{x:300,transition:"linear",time:1});
			Tweener.addTween(sp1,{y:70,time:0.5,transition:"easeOutQuad"});
			Tweener.addTween(sp1,{y:400,time:0.5,transition:"easeInQuad",delay:0.5});

			sp2 = new Sprite();
			sp2.graphics.beginFill(0x0000ff);
			sp2.graphics.drawCircle(-10,-10,20);
			sp2.graphics.endFill();
			sp2.x = 340;
			sp2.y = 400;
			addChild(sp2);
			Tweener.addTween(sp2,{x:620,time:1,transition:"easeInSine",delay:2});
			Tweener.addTween(sp2,{y:70,time:1,transition:"easeOutSine",delay:2});
		}
	}
}



转载请注明:陈童的博客 » Tweener——模拟抛物线和圆形轨迹

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量