Tweening过度缓动效果

              Tweening过度缓动效果

1.        首先介绍easing缓动效果。

要实现如上效果，必须把目标对象按设定的时间阀值内移动到指定的位置，该曲线随着时间的推移，速度越来越快，实现这种效果必须用到二次方程。

下面是构造函数中核心代码。

_sprite.addEventListener(Event.ENTER_FRAME,executeAll);

 

       public static function executeAll($e:Event = null):void {

           var t:uint = _curTime = getTimer();

           trace("executeAllTime:"+t);

           render(t);

       }

//     t为当前时间var t:uint = _curTime = getTimer();

       public function render($time:uint):void {

           var time:Number = ($time - this.startTime) / 1000, factor:Number, tp:Object,i:int;

//当当前对象执行缓动运动的时间大于持续的时间时,设定此时的系数factor为1，这样ball就到达了指定的目标位置。当然时间也不是绝对准确的。但是误差人的肉眼是观察不出来几毫秒到顶多几十毫秒的差别的。而且这个数字也是在可以接受范围之内。

           if (time >= this.duration) {

              time = this.duration;

              factor = 1;

           } else {

//            这里调用缓动函数， factor在这里是返回一个系数，随着时间推移factor不断增大,当factor趋向于1时,ball球就到达了其指定位置。此时刚好到达设定的duration

              factor = easeOut (time, 0, 1, this.duration);

              trace("factor:"+factor);

             

           }

//change变化率就是指初始化时，源位置离目标位置的距离changeX=targeg.x-ball.x

  changeY=Target.y-ball.y

              Ball.x = ball.x + (factor * changeX);

               Ball.y = ball.y +(factor * changeY);

       }

 

 

 

 

       public static function easeOut($time:Number, $begin:Number, $change:Number,$duration:Number):Number {

//         factor = this.vars.ease(time, 0, 1,this.duration);   var time:uint =_curTime = getTimer();

//             getTweenPosition = function (time,begin, change,duration)

           trace("$time:"+$time);

           trace("$begin:"+$begin);

           trace("$change:"+$change);

           trace("$duration:"+$duration);

           return -$change * ($time /= $duration) * ($time - 2) + $begin;

       }

 

Ball代码为:

 

package {

    import flash.display.Sprite;

    import gs.TweenLite;

   

    public class Ball extends Sprite {

       public var radius:Number;

       private var color:uint;

       public var vx:Number = 0;

       public var vy:Number = 0;

      

       public function Ball(radius:Number=40, color:uint=0xff0000) {

           this.radius = radius;

           this.color = color;

           init();

//         TweenLite.to();

       }

       public function init():void {

           graphics.beginFill(color);

           graphics.drawCircle(0, 0, radius);

           graphics.endFill();

       }

    }

}

 

注解:此上为核心代码。也是主要思想所在。其他的缓动函数或其他效果也是如此设计思想。我是根据学习分析TweenLiteAS3代码得出的结论。因为他们代码比较多而且复杂。我就简化了工作。有不便之处请与我联系309921583

TweenLiteAS3下载地址为:http://blog.greensock.com/tweenliteas3/