Tweener——模拟抛物线和圆形轨迹
<img class="alignnone size-full wp-image-1447" alt="HFL79032" src="http://www.everyinch.net/wp-content/uploads/2013/07/HFL79032.jpg" width="300" height="266" />
大家知道，二次缓动实际是抛物线的一段。这样可以使用Tweener补间引擎来模拟抛物线的轨迹。首先使用linear类型的补间将目标物体移动到指定的x坐标，假设时间为1。这时将时间分成两个部分，前0.5秒使用二次缓入easeInQuad向上缓动目标物体的y坐标，后0.5秒使用二次缓出easeOutQuad将目标物体的y坐标缓动到原始值。同样，利用easeInSine和easeOutSine可以模拟圆形的轨迹，即使用easeInSine缓动x坐标，easeOutSine缓动y坐标即可。源代码如下：
[code lang="as3"]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});
}
}
}[/code]
查看完整版本： Tweener——模拟抛物线和圆形轨迹
Tags: 缓动，tweener