Tweener——Back和Elastic缓动类型

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

clock

Back类型的缓动easeInBack、easeOutBack、easeInOutBack,Elastic类型的缓动easeInElastic、easeOutElastic、easeInOutElastic,具有一定的弹性效果,适当的使用可以制作出与众不同的动画效果。示例源代码如下:

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

示例绘制一个圆形Sprite表示表盘,一个矩形Sprite表示时钟的秒针。代码没1000毫秒执行一次onTimer函数。在onTimer函数中,使用Tweener补间引擎每0.75秒钟将秒针旋转6度,这里使用的缓动类型是easeOutBack。在表盘Sprite上添加onRollOver和onRollOut事件处理函数,并使用Tweener的easeOutElastic缓动类型缩放表盘Sprite。



转载请注明:陈童的博客 » Tweener——Back和Elastic缓动类型

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

表情

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

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

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