Tweener——补间拖放

在ActionScript 3.0中，同样提供了startDrag和stopDrag方法用来处理拖放操作。但这种拖放操作缺乏缓动，显得有点直来直去，不太自然。使用Tweener补间引擎来模拟拖动操作，就可以使拖动效果显得比较真实。示例的类文件名为TweenerDrag.as，源代码如下：

1    import caurina.transitions.Tweener;
2 
3    import flash.display.Sprite;
4    import flash.events.MouseEvent;
5 
6    [SWF(width="640",height="480",backgroundColor="0xffffff")]
7    public class TweenerDrag extends Sprite {
8        public var sp1:Sprite;
9        public var sp2:Sprite;
10 
11        public function TweenerDrag() {
12            sp1 = new Sprite();
13            sp1.graphics.beginFill(0xff0000);
14            sp1.graphics.drawCircle(0,0,20);
15            sp1.graphics.endFill();
16            sp1.x = 200;
17            sp1.y = 230;
18            addChild(sp1);
19 
20            sp1.buttonMode = true;
21            sp1.addEventListener(MouseEvent.MOUSE_DOWN, this.onSp1MouseDown);
22            sp1.addEventListener(MouseEvent.MOUSE_UP, this.onSp1MouseUp);
23 
24            sp2 = new Sprite();
25            sp2.graphics.beginFill(0x0000ff);
26            sp2.graphics.drawCircle(0,0,20);
27            sp2.graphics.endFill();
28            sp2.x = 400;
29            sp2.y = 230;
30            addChild(sp2);
31 
32            sp2.buttonMode = true;
33            sp2.addEventListener(MouseEvent.MOUSE_DOWN, onSp2MouseDown);
34        }
35 
36        private function onSp1MouseDown(e:MouseEvent):void{
37            sp1.startDrag();
38        }
39 
40        private function onSp1MouseUp(e:MouseEvent):void{
41            sp1.stopDrag();
42        }
43 
44        private function onSp2MouseDown(e:MouseEvent):void{
45            stage.addEventListener(MouseEvent.MOUSE_MOVE, onSp2MouseMove);
46            stage.addEventListener(MouseEvent.MOUSE_UP, onSp2MouseUp);
47        }
48 
49        private function onSp2MouseMove(e:MouseEvent):void{
50            Tweener.addTween(sp2, {
51                x: mouseX,
52                y: mouseY,
53                time: 1
54            });
55        }
56 
57        private function onSp2MouseUp(e:MouseEvent):void{
58            stage.removeEventListener(MouseEvent.MOUSE_MOVE, onSp2MouseMove);
59            stage.removeEventListener(MouseEvent.MOUSE_UP,onSp2MouseUp);
60        }
61    }
62}

代码首先在舞台上绘制一个红色圆形的Sprite，并为其添加鼠标事件，使其可以拖放，用来作为效果的对比。然后在定义一个蓝色圆形的Sprite，在其上添加MOUSE_DOWN事件处理器。只要在蓝色圆形的Sprite上单击就触发onSp2MouseDown函数，在函数中添加MOUSE_MOVE和MOUSE_UP事件处理，移动鼠标则触发onSp2MouseMove函数中的Tweener补间，使sp2缓动到鼠标位置。释放鼠标则触发onSp2MouseUp函数，移除MOUSE_MOVE和MOUSE_UP事件。

分享&收藏

转载请注明：陈童的博客 » Tweener——补间拖放

陈童的博客专注用户体验 Every Inch of User Experience

Hi，您需要填写昵称和邮箱！