成比例運動

    緩動(ease)與彈性(sPRing)聯系緊密。這兩種方法都是將對象（通常指Sprite 或

MovieClip）從某一點移動到目標點。使用緩動運動(Easing)，如同讓影片滑動到目標并停

止。使用彈性運動(Springing)，會產生向前或向后的反彈，最終停止在目標點位。兩種方

法具有一些共同點：

■ 需要一個目標點；

■ 確定到目標點的距離；

■ 成比例地將影片移動到目標點——距離越遠，移動速度越快。

    緩動運動(easing)與彈性運動(springing)的不同之處在于移動的比例。緩動運動時，

速度與距離成正比，離目標越遠，物體運動速度越快。當物體與目標點非常非常接近時，就

幾乎不動了。

    彈性運動時，加速度與距離成正比。如果物體與目標離得很遠，再用上加速度，會使移

動速度非常快。當物體接近目標時，加速度會減小，但依然存在！物體會飛過目標點，隨后

再由反向加速度將它拉回來。最終，用摩擦力使其靜止。

    下面，我們分別看一下這兩種方法，先從緩動(easing)開始。

緩動(Easing)

    首先說明緩動的種類不只有一種。在 Flash IDE中，制作補間動畫時，我們就可以看

到 “緩動輸入”（ease in） 和 “緩動輸出”（ease out）。下面所討論的緩動類型與運

動補間的 “緩動輸出”相似。在本章后面的 “高級緩動”一節，將會給大家一個網站連接，

在那里可以學習制作所有緩動的效果。

簡單緩動

    簡單緩動是個非常基礎概念，就是將一個物體移到別處去。創建這個“運動效果”時，

希望物體能在幾幀內慢慢移動到某一點。我們可以求出兩點之間的夾角，然后設置速度，再

使用三角學計算出 vx和 vy，然后讓物體運動。每一幀都判斷一下物體與目標點的距離，

如果到達了目標則停止。這種運動還需要一定條件的約束才能實現，但如果要讓物體運動得

很自然，顯然這種方法是行不通的。

問題在于物體沿著固定的速度和方向運動，到達目標點后，立即停止。這種方法，用于

表現物體撞墻的情景，也許比較合適。但是物體移動到目標點的過程，就像是某個人明確地

知道他的目的地，然后向著目標有計劃地前進，起初運動的速度很快，而臨近目標點時，速

度就開始慢下來了。換句話講，它的速度向量與目標點的距離是成比例的。

    先來舉個例子。比如說我們開車回家，當離家還有幾千米的距離時，要全速前進，當離

開馬路開進小區時速度就要稍微慢一點兒。當還差兩座樓時就要更慢一點兒。在進入車庫時，

速度也許只有幾邁。當進入停車位時速度還要更慢些，在還有幾英尺的時候，速度幾乎為零。

    如果大家注意觀察就會發現，這種行為就像關門、推抽屜一樣。開始的速度很快，然后

逐漸慢下來。

    在我們使用緩動使物體歸位時，運動顯得很自然。簡單的緩動運動實現起來也非常簡單，

比求出夾角，計算 vx,vy還要簡單。下面是緩動的實現策略：

1.確定一個數字作為運動比例系數，這是個小于 1的分數；

2.確定目標點；

3.計算物體與目標點的距離；

4.用距離乘以比例系數，得出速度向量；

5.將速度向量加到當前物體坐標上；

6.重復 3到 5步。

 我們先來解釋一下這個過程，看看在 ActionScript中是怎樣實現的。

    首先，確定一個分數作為比例系數。我們說過，速度與距離是成比例的。也就是說速度

是距離的一部分。比例系數在 0和 1之間，系數越接近 1，運動速度就會越快；系數越接

近 0，運動速度就會越慢。但是要小心，系數過小會使物體無法到達目標。開始我們以0.2

作為系數，這個變量名就叫 easing。初始代碼如下：

var easing:Number = 0.2;

接下來，確定目標。只需要一個簡單的 x,y坐標，選擇舞臺中心坐標再合適不過了。

var targetX:Number = stage.stageWidth / 2;

var targetY:Number = stage.stageHeight / 2;

下面，確定物體到達目標的距離。假設已經有一個名為 ball影片，只需要從 ball的 x,y

坐標中減去目標的 x,y。

var dx:Number = targetX - ball.x;

var dy:Number = targetY - ball.y;

速度等于距離乘以比例系數：

vx = dx * easing;

vy = dy * easing;

  129  130

下面，大家知道該怎么做了吧：

ball.x += vx;

ball.y += vy;

最后重復步驟 3到步驟 5，因此只需加入enterFrame 處理函數。

讓我們再看一下這三個步驟，以便將它們最大程度地簡化：

var dx:Number = targetX - ball.x;

var dy:Number = targetY - ball.y;

vx = dx * easing;

vy = dy * easing;

ball.x += vx;

ball.y += vy;

把前面四句簡化為兩句：

vx = (targetX - ball.x) * easing;

vy = (targetY - ball.y) * easing;

ball.x += vx;

ball.y += vy;

如果大家覺得還不夠精簡，還可以進一步縮短：

ball.x += (targetX - ball.x) * easing;

ball.y += (targetY - ball.y) * easing;

    在開始學習使用緩動時，也許大家會比較喜歡用詳細的句型，讓程序看上去更加清晰。

但是當你使過幾百次后，就會更習慣用第三種寫法。下面，我們選用第二種句型，以加強對

速度的理解。

    現在就來看一下腳本動作，依然延用 Ball類。以下是文檔類 Easing1.as：

package {

 import flash.display.Sprite;

 import flash.events.Event;

 public class Easing1 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 Easing1() {

   trace(targetX,targetY);

   init();

  }

  private function init():void {

   ball=new Ball  ;

   addChild(ball);

   addEventListener(Event.ENTER_FRAME,onEnterFrame);

  }

  private function onEnterFrame(event:Event):void {

   var vx:Number=(targetX - ball.x) * easing;

   var vy:Number=(targetY - ball.y) * easing;   131

   ball.x+= vx;

   ball.y+= vy;

  }

 }

}

    試改變 easing的值，觀察運動效果。