Tweener——补间拖放

缓动及缓动库 everyinch 1527℃ 0评论

drag

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

	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);
		}
	}
}

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



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

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量