高级动画编程——缓动（读书笔记）

2010-05-15 15:13

/**
*             第8章   缓动和弹性
*
* *****缓动与弹性共同特点：(1)需要设定一个目标点。(2)需要检测出距目标点的距离。(3)运动是和距离成正比的。
* *****缓动与弹性不同特点：(1)缓动中，是速度与距离成正比。距离目标点越远，物体移动的速度越快。当非常接近物体时，他几乎不动。
*          (2)弹性中，是加速度与距离成正比。物体离目标点越远，加速度越大，速度会很快增加。里目标点越近，加速度越小
*             但他仍在加速。他会穿过目标点，然后加速度再将它拉回来。最后摩擦力让它停止。
*
* 1.缓动思路：(1)设定一个比例系数，他将是一个比1小的数值。
*      (2)指定你的目标点。
*      (3)计算物体到目标点的距离。
*      (4)将距离与比例系数相乘，这事你的速度。
*      (5)加入速度值给当前物体的位置。
*      (6)重复第3到第5步，直到物体到达目标点。
*/
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

public class Easing extends Sprite
{
   private var ball:Ball;
   private var easing:Number = 1;
   private var targetX:Number = stage.stageWidth/2;
   private var targetY:Number = stage.stageHeight/2;
  
   public function Easing()
   {
    init();
    initStage();
   }
  
   private function initStage():void
   {
    stage.align = "top_left";
    stage.scaleMode = "noScale";
   }
  
   private function init():void
   {
    ball = new Ball();
    addChild(ball);
    ball.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
    addEventListener(Event.ENTER_FRAME,onEnterFrame);
   }
  
   private function onMouseDown(e:MouseEvent):void
   {
    ball.startDrag();
    removeEventListener(Event.ENTER_FRAME,onEnterFrame);
    stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
   }
  
   private function onMouseUp(e:Event):void
   {
    ball.stopDrag();
    addEventListener(Event.ENTER_FRAME,onEnterFrame);
    stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);
   }
  
   private function onEnterFrame(e:Event):void
   {
    var vx:Number = (targetX - ball.x)*easing;
    var vy:Number = (targetY - ball.y)*easing;
    ball.x += vx;
    ball.y += vy;
   }
}
}

/**
* 2.何时停止缓动
* 如果你正向一个目标点做简单的缓动，那么最终你将到达目标点并且缓动的目的已经达到。但是，到目前为止，缓动代码仍在执行，尽管物体移动
* 的不是很明显，如果不停止将是对cpu资源的浪费。
* (1)flash中最小位移：你能把一个像素分成多少份？答案是20。实际上，一个像素的二十分之一有个名字：twip(缇)。在falsh内部，falsh计算
*     任何内容都是用twip。细心的你可能会发现舞台上的物体移动的距离总是0.05的倍数。一个物体的目标点是100，实际上他能到的位置只能是99.95
* (2)在程序中一个物体距离他的目标点小于1个像素，他就可以被认为是到达了，那么我们就可以关闭缓动了。
* (3)缓动不只是应用于运动<1>透明度：ball.alpha = 0;
*           var targetAlpha:Number = 1;
*           然后enterframe事件中使用缓动淡入 ball.alpha += (targetAlpha - ball.alpha)*easing;
*           或者把0和1反过来使他淡出。
*         <2>旋转：可利用旋转的箭头：arrow.rotation = 90;
*                  var targetRotation:Number = 270;
*           然后缓动他：arrow.rotation += (targetRotion - arrow.rotation)*easing;
*         <3>颜色：从红，蓝，绿色值分别缓动，然后再把它们组合成一个24位色。
*           red = 255;    green = 0;     blue = 0;
*           redTarget = 0; greenTarget = 0; blueTarget = 255;
*           然后enterFrame在每种色值中执行缓动；例如红色值： red += (redtarget - red)*easing;
*          将三种色值组合成一个颜色值 col = red<<16 | green<<8 | blue;
* *****高级缓动可以查看：www.robertpenner.com(一个专门收集缓动公式的网站)
*/
package
{
import flash.display.Sprite;
import flash.events.Event;

public class EasingOff extends Sprite
{
   private var ball:Ball;
   private var easing:Number = 0.2;
   private var targetX:Number = stage.stageWidth /2 ;
   private var targetY:Number = stage.stageHeight / 2 ;
  
   public function EasingOff()
   {
    init();
    initStage();
   }
  
   private function init():void
   {
    ball = new Ball();
    addChild(ball);
    ball.y = stage.stageHeight / 2 ;
    addEventListener(Event.ENTER_FRAME,onEnterFrame);
   }
  
   private function onEnterFrame(e:Event):void
   {
    var dx:Number = targetX - ball.x;
    if(Math.abs(dx) < 1)
    {
     ball.x = targetX;
     removeEventListener(Event.ENTER_FRAME,onEnterFrame);
     trace("done");
    }
    else
    {
     var vx:Number = dx * easing;
     ball.x += vx;
    }
   }
  
  
   private function initStage():void
   {
    stage.align = "top_left";
    stage.scaleMode = "noScale";
   }
}
}

package
{
import flash.display.Sprite;

public class Ball extends Sprite
{
   public function Ball()
   {
    this.graphics.clear();
    this.graphics.beginFill(0xff0000);
    this.graphics.drawCircle(0,0,10);
    this.graphics.endFill();
   }
}
}