Tweener——序列补间
<img class="alignnone size-full wp-image-1425" alt="tweenSequence" src="http://www.everyinch.net/wp-content/uploads/2013/07/tweenSequence.jpg" width="300" height="267" />
前面已经讲到利用Tweener补间引擎的onComplete参数可以指定在某一个缓动执行完毕后，执行另一个缓动，从而产生一个接着另一个运动的效果，也就是按照次序的执行补间动画。使用Tweener补间引擎的delay参数可以实现同样的效果。也就是使后面的补间延迟一定的时间再执行，从而产生序列补间的效果。示例源代码如下：
[code lang="as3"]package{
import caurina.transitions.Tweener;
import flash.display.Sprite;
import flash.geom.Point;
[SWF(width="640",height="480",backgroundColor="0xffffff")]
public class TweenerSequence extends Sprite {
private const NUMBERS:int = 15;
private const RADIUS:int = 180;
public function TweenerSequence(){
var center:Point = new Point();
center.x = 320;
center.y = 240;
for (var i:int = 0; i < NUMBERS; i++) {
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xffcc00);
circle.graphics.drawCircle(-10,-10,20);
circle.graphics.endFill();
addChild(circle);
circle.alpha = 0;
circle.x = center.x;
circle.y = center.y;
var angle:Number = 2 * Math.PI / NUMBERS * i;
var target:Point = new Point();
target.x = RADIUS * Math.cos(angle) + center.x;
target.y = RADIUS * Math.sin(angle) + center.y;
Tweener.addTween(circle, {
alpha: 1,
x: target.x,
y: target.y,
transition: "easeOutExpo",
time: 1,
delay: i * 0.2
});
Tweener.addTween(circle, {
x: center.x,
y: center.y,
alpha: 0,
time: 1,
transition: "easeInExpo",
delay: i * 0.2 + 5
});
}
}
}
}[/code]
代码首先声明构造圆形Sprite的数量NUMBERS常量，以及排成圆形的半径RADIUS常量。使用for循环构造NUMBERS个圆形Sprite，将每一个Sprite的alpha设置为完全透明，并定位在舞台的中心点。使用圆形公式计算每个Sprite要缓动到的目标点target。然后使用Tweener补间引擎将每个Sprite延迟0.2秒缓动到相应的目标点target，并将它的alpha属性缓动为1。延迟5秒之后，再将每个Sprite缓动回中心点，并将alpha属性缓动为0。
查看完整版本： Tweener——序列补间
Tags: tweener