Tweener——Back和Elastic缓动类型
<img class="alignnone size-full wp-image-1437" alt="clock" src="http://www.everyinch.net/wp-content/uploads/2013/07/clock.jpg" width="350" height="350" />
Back类型的缓动easeInBack、easeOutBack、easeInOutBack，Elastic类型的缓动easeInElastic、easeOutElastic、easeInOutElastic，具有一定的弹性效果，适当的使用可以制作出与众不同的动画效果。示例源代码如下：
[code lang="as3"] import caurina.transitions.Tweener;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
[SWF(width="640",height="480",backgroundColor="0xffffff")]
public class TweenerClock extends Sprite{
private var clock:Sprite;
private var second:Sprite;
public function TweenerClock(){
clock = new Sprite();
clock.graphics.beginFill(0xcccccc);
clock.graphics.drawCircle(0,0,100);
clock.graphics.endFill();
clock.x = 320;
clock.y = 240;
addChild(clock);
second = new Sprite();
second.graphics.beginFill(0xff0000);
second.graphics.drawRect(-2.5,-100,5,100);
second.graphics.endFill();
second.x = 320;
second.y = 240;
addChild(second);
var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER,onTimer);
timer.start();
clock.addEventListener(MouseEvent.ROLL_OVER,onRollOver);
clock.addEventListener(MouseEvent.ROLL_OUT,onRollOut);
}
private function onRollOver(e:MouseEvent):void{
Tweener.addTween(clock, {
scaleX: 1.2,
scaleY: 1.2,
time: 1,
transition: "easeOutBack"
});
}
private function onRollOut(e:MouseEvent):void{
Tweener.addTween(clock, {
scaleX: 1,
scaleY: 1,
time: 0.5,
transition: "easeOutElastic"
});
}
private function onTimer(e:TimerEvent):void{
Tweener.addTween(second, {
rotation: second.rotation + 6,
time: 0.75,
transition: "easeOutElastic"
});
}
}
}[/code]
示例绘制一个圆形Sprite表示表盘，一个矩形Sprite表示时钟的秒针。代码没1000毫秒执行一次onTimer函数。在onTimer函数中，使用Tweener补间引擎每0.75秒钟将秒针旋转6度，这里使用的缓动类型是easeOutBack。在表盘Sprite上添加onRollOver和onRollOut事件处理函数，并使用Tweener的easeOutElastic缓动类型缩放表盘Sprite。
查看完整版本： Tweener——Back和Elastic缓动类型
Tags: 缓动，tweener