Tweener——补间拖放
<img class="alignnone size-full wp-image-1448" alt="drag" src="http://www.everyinch.net/wp-content/uploads/2013/07/drag.jpg" width="258" height="164" />
在ActionScript 3.0中，同样提供了startDrag和stopDrag方法用来处理拖放操作。但这种拖放操作缺乏缓动，显得有点直来直去，不太自然。使用Tweener补间引擎来模拟拖动操作，就可以使拖动效果显得比较真实。示例的类文件名为TweenerDrag.as，源代码如下：
[code lang="as3"] import caurina.transitions.Tweener;
import flash.display.Sprite;
import flash.events.MouseEvent;
[SWF(width="640",height="480",backgroundColor="0xffffff")]
public class TweenerDrag extends Sprite {
public var sp1:Sprite;
public var sp2:Sprite;
public function TweenerDrag() {
sp1 = new Sprite();
sp1.graphics.beginFill(0xff0000);
sp1.graphics.drawCircle(0,0,20);
sp1.graphics.endFill();
sp1.x = 200;
sp1.y = 230;
addChild(sp1);
sp1.buttonMode = true;
sp1.addEventListener(MouseEvent.MOUSE_DOWN, this.onSp1MouseDown);
sp1.addEventListener(MouseEvent.MOUSE_UP, this.onSp1MouseUp);
sp2 = new Sprite();
sp2.graphics.beginFill(0x0000ff);
sp2.graphics.drawCircle(0,0,20);
sp2.graphics.endFill();
sp2.x = 400;
sp2.y = 230;
addChild(sp2);
sp2.buttonMode = true;
sp2.addEventListener(MouseEvent.MOUSE_DOWN, onSp2MouseDown);
}
private function onSp1MouseDown(e:MouseEvent):void{
sp1.startDrag();
}
private function onSp1MouseUp(e:MouseEvent):void{
sp1.stopDrag();
}
private function onSp2MouseDown(e:MouseEvent):void{
stage.addEventListener(MouseEvent.MOUSE_MOVE, onSp2MouseMove);
stage.addEventListener(MouseEvent.MOUSE_UP, onSp2MouseUp);
}
private function onSp2MouseMove(e:MouseEvent):void{
Tweener.addTween(sp2, {
x: mouseX,
y: mouseY,
time: 1
});
}
private function onSp2MouseUp(e:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onSp2MouseMove);
stage.removeEventListener(MouseEvent.MOUSE_UP,onSp2MouseUp);
}
}
}[/code]
代码首先在舞台上绘制一个红色圆形的Sprite，并为其添加鼠标事件，使其可以拖放，用来作为效果的对比。然后在定义一个蓝色圆形的Sprite，在其上添加MOUSE_DOWN事件处理器。只要在蓝色圆形的Sprite上单击就触发onSp2MouseDown函数，在函数中添加MOUSE_MOVE和MOUSE_UP事件处理，移动鼠标则触发onSp2MouseMove函数中的Tweener补间，使sp2缓动到鼠标位置。释放鼠标则触发onSp2MouseUp函数，移除MOUSE_MOVE和MOUSE_UP事件。