返回“Flash基礎理論課 - 目錄”
很難相信我們居然用了七章才把基礎的內容介紹完，現在進(jìn)入第八章，這里是高級內容的起點(diǎn)。從這里開(kāi)始內容也開(kāi)始變得越來(lái)越有趣了，前面的章節都是些常用的概念與技術(shù)。從今天開(kāi)始，每章只著(zhù)重介紹一兩種特殊的運動(dòng)。
本章將介紹緩動(dòng)運動(dòng)（成比例速度）與彈性運動(dòng)（成比例加速度），不用擔心它們只是兩個(gè)名詞術(shù)語(yǔ)，這章可以快速地略讀。我會(huì )給出很多例子程序，可以使大家充分了解這項技術(shù)的強大。
成比例運動(dòng)
緩動(dòng)(ease)與彈性(spring)聯(lián)系緊密。這兩種方法都是將對象（通常指 Sprite或MovieClip）從某一點(diǎn)移動(dòng)到目標點(diǎn)。使用緩動(dòng)運動(dòng)(Easing)，如同讓影片滑動(dòng)到目標并停止。使用彈性運動(dòng)(Springing)，會(huì )產(chǎn)生向前或向后的反彈，最終停止在目標點(diǎn)位。兩種方法具有一些共同點(diǎn)：
■需要一個(gè)目標點(diǎn)；
■確定到目標點(diǎn)的距離；
■成比例地將影片移動(dòng)到目標點(diǎn)——距離越遠，移動(dòng)速度越快。
緩動(dòng)運動(dòng)(easing)與彈性運動(dòng)(springing)的不同之處在于移動(dòng)的比例。緩動(dòng)運動(dòng)時(shí)，速度與距離成正比，離目標越遠，物體運動(dòng)速度越快。當物體與目標點(diǎn)非常非常接近時(shí)，就幾乎不動(dòng)了。
彈性運動(dòng)時(shí)，加速度與距離成正比。如果物體與目標離得很遠，再用上加速度，會(huì )使移動(dòng)速度非?？?。當物體接近目標時(shí)，加速度會(huì )減小，但依然存在！物體會(huì )飛過(guò)目標點(diǎn)，隨后再由反向加速度將它拉回來(lái)。最終，用摩擦力使其靜止。
下面，我們分別看一下這兩種方法，先從緩動(dòng)(easing)開(kāi)始。
緩動(dòng)(Easing)
首先說(shuō)明緩動(dòng)的種類(lèi)不只有一種。在 Flash IDE 中，制作補間動(dòng)畫(huà)時(shí)，我們就可以看到 “緩動(dòng)輸入”（ease in）和“緩動(dòng)輸出”（ease out）。下面所討論的緩動(dòng)類(lèi)型與運動(dòng)補間的“緩動(dòng)輸出”相似。在本章后面的“高級緩動(dòng)”一節，將會(huì )給大家一個(gè)網(wǎng)站連接，在那里可以學(xué)習制作所有緩動(dòng)的效果。
簡(jiǎn)單緩動(dòng)
簡(jiǎn)單緩動(dòng)是個(gè)非?；A概念，就是將一個(gè)物體移到別處去。創(chuàng )建這個(gè)“運動(dòng)效果”時(shí)，希望物體能在幾幀內慢慢移動(dòng)到某一點(diǎn)。我們可以求出兩點(diǎn)之間的夾角，然后設置速度，再使用三角學(xué)計算出 vx和vy，然后讓物體運動(dòng)。每一幀都判斷一下物體與目標點(diǎn)的距離，如果到達了目標則停止。這種運動(dòng)還需要一定條件的約束才能實(shí)現，但如果要讓物體運動(dòng)得很自然，顯然這種方法是行不通的。
問(wèn)題在于物體沿著(zhù)固定的速度和方向運動(dòng)，到達目標點(diǎn)后，立即停止。這種方法，用于表現物體撞墻的情景，也許比較合適。但是物體移動(dòng)到目標點(diǎn)的過(guò)程，就像是某個(gè)人明確地知道他的目的地，然后向著(zhù)目標有計劃地前進(jìn)，起初運動(dòng)的速度很快，而臨近目標點(diǎn)時(shí)，速度就開(kāi)始慢下來(lái)了。換句話(huà)講，它的速度向量與目標點(diǎn)的距離是成比例的。
先來(lái)舉個(gè)例子。比如說(shuō)我們開(kāi)車(chē)回家，當離家還有幾千米的距離時(shí)，要全速前進(jìn)，當離開(kāi)馬路開(kāi)進(jìn)小區時(shí)速度就要稍微慢一點(diǎn)兒。當還差兩座樓時(shí)就要更慢一點(diǎn)兒。在進(jìn)入車(chē)庫時(shí)，速度也許只有幾邁。當進(jìn)入停車(chē)位時(shí)速度還要更慢些，在還有幾英尺的時(shí)候，速度幾乎為零。
如果大家注意觀(guān)察就會(huì )發(fā)現，這種行為就像關(guān)門(mén)、推抽屜一樣。開(kāi)始的速度很快，然后逐漸慢下來(lái)。
在我們使用緩動(dòng)使物體歸位時(shí)，運動(dòng)顯得很自然。簡(jiǎn)單的緩動(dòng)運動(dòng)實(shí)現起來(lái)也非常簡(jiǎn)單，比求出夾角，計算 vx,vy 還要簡(jiǎn)單。下面是緩動(dòng)的實(shí)現策略：
1. 確定一個(gè)數字作為運動(dòng)比例系數，這是個(gè)小于 1的分數；
2. 確定目標點(diǎn)；
3. 計算物體與目標點(diǎn)的距離；
4. 用距離乘以比例系數，得出速度向量；
5.將速度向量加到當前物體坐標上；
6. 重復 3到5 步。圖 8-1 解釋了這一過(guò)程。
圖8-1 簡(jiǎn)單緩動(dòng)
我們先來(lái)解釋一下這個(gè)過(guò)程，看看在 ActionScript. 中是怎樣實(shí)現的。
首先，確定一個(gè)分數作為比例系數。我們說(shuō)過(guò)，速度與距離是成比例的。也就是說(shuō)速度是距離的一部分。比例系數在 0和1 之間，系數越接近 1，運動(dòng)速度就會(huì )越快；系數越接近0，運動(dòng)速度就會(huì )越慢。但是要小心，系數過(guò)小會(huì )使物體無(wú)法到達目標。開(kāi)始我們以 0.2 作為系數，這個(gè)變量名就叫 easing。初始代碼如下：
var easing:Number = 0.2;
接下來(lái)，確定目標。只需要一個(gè)簡(jiǎn)單的x,y 坐標，選擇舞臺中心坐標再合適不過(guò)了。
var targetX:Number = stage.stageWidth / 2;
var targetY:Number = stage.stageHeight / 2;
下面，確定物體到達目標的距離。假設已經(jīng)有一個(gè)名為 ball 影片，只需要從ball的x,y 坐標中減去目標的x,y。
var dx:Number = targetX - ball.x;
var dy:Number = targetY - ball.y;
速度等于距離乘以比例系數：
vx = dx * easing;
vy = dy * easing;
下面，大家知道該怎么做了吧：
ball.x += vx;
ball.y += vy;
最后重復步驟 3 到步驟 5，因此只需加入enterFrame. 處理函數。
讓我們再看一下這三個(gè)步驟，以便將它們最大程度地簡(jiǎn)化：
var dx:Number = targetX - ball.x;
var dy:Number = targetY - ball.y;
vx = dx * easing;
vy = dy * easing;
ball.x += vx;
ball.y += vy;
把前面四句簡(jiǎn)化為兩句：
vx = (targetX - ball.x) * easing;
vy = (targetY - ball.y) * easing;
ball.x += vx;
ball.y += vy;
如果大家覺(jué)得還不夠精簡(jiǎn)，還可以進(jìn)一步縮短：
ball.x += (targetX - ball.x) * easing;
ball.y += (targetY - ball.y) * easing;
在開(kāi)始學(xué)習使用緩動(dòng)時(shí)，也許大家會(huì )比較喜歡用詳細的句型，讓程序看上去更加清晰。但是當你使過(guò)幾百次后，就會(huì )更習慣用第三種寫(xiě)法。下面，我們選用第二種句型，以加強對速度的理解。
現在就來(lái)看一下腳本動(dòng)作，依然延用Ball 類(lèi)。以下是文檔類(lèi) 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;
ball.x+= vx;
ball.y+= vy;
}
}
}
試改變easing的值，觀(guān)察運動(dòng)效果。
下面，大家可以讓小球變成可以拖拽的，與第七章所做的拖拽與拋落效果很像。在點(diǎn)擊小球時(shí)開(kāi)始拖拽，同時(shí)，刪除 enterFrame. 處理函數并且用stage 偵聽(tīng) mouseUp。在 mouseUp 函數中，停止拖拽，刪除 mouseUp 方法，并重新開(kāi)始 enterFrame。下面是文檔類(lèi) Easin2.as ：
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class Easing2 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 Easing2() {
init();
}
private function init():void {
ball=new Ball ;
addChild(ball);
ball.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
addEventListener(Event.ENTER_FRAME,onEnterFrame);
}
private function onMouseDown(event:MouseEvent):void {
ball.startDrag();
removeEventListener(Event.ENTER_FRAME,onEnterFrame);
stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
}
private function onMouseUp(event:MouseEvent):void {
ball.stopDrag();
addEventListener(Event.ENTER_FRAME,onEnterFrame);
stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);
}
private function onEnterFrame(event:Event):void {
var vx:Number=(targetX - ball.x) * easing;
var vy:Number=(targetY - ball.y) * easing;
ball.x+= vx;
ball.y+= vy;
}
}
}
緩動(dòng)何時(shí)停止
在物體緩動(dòng)運動(dòng)到目標點(diǎn)時(shí)，物體最終會(huì )到達目標點(diǎn)并且完成緩動(dòng)效果。但是，即使不顯示該對象，緩動(dòng)代碼仍在執行中，這一來(lái)浪費了 CPU 資源。當物體到達目標時(shí)，應該停止執行代碼。判斷物體是否到達目標的方法非常簡(jiǎn)單，就像這樣：
if(ball.x == targetX && ball.y == targetY) {
// code to stop the easing
}
但是這里要注意一些技巧。
我們所討論的緩動(dòng)類(lèi)型涉及到了著(zhù)名的Xeno悖論。Xeno也是位希臘人，愛(ài)好測量實(shí)驗。Xeno將運動(dòng)分解為下面幾個(gè)步驟：物體要從A 點(diǎn)到達 B 點(diǎn)，它首先要移動(dòng)到兩點(diǎn)間一半的距離。然后物體再從該點(diǎn)出發(fā)，到達與 B 點(diǎn)距離一半的距離。然后再折半。每次只移動(dòng)離目標一半的距離，但永遠無(wú)法準確地達到目標。
這個(gè)悖論聽(tīng)起來(lái)是非常符合邏輯的。但是很明顯，我們確實(shí)將物體從一點(diǎn)移動(dòng)到了另一點(diǎn)，這樣看來(lái)他的說(shuō)法有些問(wèn)題。到 Flash 中看看，影片在 x 軸上的位置為 0，假設要將它移動(dòng)到 x 軸為 100的位置。按照悖論所說(shuō)，設緩動(dòng)系數為 0.5，這樣每次運動(dòng)到離目標一半的距離。過(guò)程如下：
■從0 點(diǎn)開(kāi)始，經(jīng)過(guò) 1 幀，到達 50。
■第 2 幀，到達 75。
■剩下的距離是 25。它的一半是 12.5 ，所以新的距離就是 87.5。
■按照這種順序，位置將變化為 93.75, 96.875, 98.4375 等等。20 幀以后，將到達 99.999809265。
從理論上講位置越來(lái)越接近目標，但是永遠無(wú)法準確地到達目標點(diǎn)。然而，在代碼中進(jìn)行試驗時(shí)，結果就發(fā)生了一些微妙的變化。歸根結底問(wèn)題就在于“一次最少能移動(dòng)多少個(gè)像素”，答案是 1/20。事實(shí)上，二十分之一像素有個(gè)特有的名字：twip (緹)。在 Flash 內部計算單位都采用twip 像素，包括所有 Sprite 影片，影片剪輯和其它舞臺對象。因此，在顯示影片位置時(shí)，這個(gè)數值永遠是 0.05的倍數。
下面舉個(gè)例子，一個(gè)影片要到達 100的位置，而它所到達的最接近的位置事實(shí)上是 99.5。再分隔的距離，就是加上 (100 – 99.95) /2。相當于加上了 0.025，四十分之一像素。超出了 twip 是能夠移動(dòng)的最小值，因此無(wú)法加上“半個(gè) twip”，結果是只增加了 0 像素。如果大家不信的話(huà)，可以親自試一下（提示：將代碼放入框架類(lèi)中的init 方法）：
var sprite:Sprite;
sprite = new Sprite();
addChild(sprite);
sprite.x = 0;
var targ:Number = 100;
for(var i:Number = 0; i < 20; i++) {
trace(i + ": " + sprite.x);
sprite.x += (targ - sprite.x) * .5;
}
循環(huán)20次，將影片移動(dòng)離目標一半的距離，這是基本緩動(dòng)應用。將代碼放入for循環(huán)，只是為了測試其位置，并不在于觀(guān)察物體運動(dòng)。循環(huán)到第 11次時(shí)，影片已經(jīng)到達了 99.95，這已經(jīng)是它能夠到達的最遠的地方了。
長(cháng)話(huà)短說(shuō)，影片并非無(wú)限地接近目標，但是它確實(shí)永遠無(wú)法準確地到達目標點(diǎn)。這樣一來(lái)，緩動(dòng)代碼就永遠不會(huì )停止。我們要回答的問(wèn)題是 “哪里才是物體最接近的目標位置？”，這需要確定到目標點(diǎn)的距離是否小于某個(gè)范圍。我發(fā)現在很多軟件中，如果物體與目標點(diǎn)的距離相差在一個(gè)像素以?xún)?，就可以說(shuō)它已經(jīng)到達了目標點(diǎn)，即可停止緩動(dòng)了。
在處理二維坐標時(shí)，可以使用第三章所介紹的公式來(lái)計算點(diǎn)間距離：
distance = Math.sqrt(dx * dx + dy * dy)
如果只處理一維坐標點(diǎn)，如只移動(dòng)一個(gè)軸的位置，就需要使用距離的絕對值，因為它有可能是個(gè)負數，使用Math.abs 方法。
OK，說(shuō)得很多了，來(lái)寫(xiě)代碼吧。這個(gè)簡(jiǎn)單的文檔類(lèi)，演示了如何關(guān)閉緩動(dòng)運動(dòng)（EasingOff.as）：
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;
public function EasingOff() {
init();
}
private function init():void {
ball = new Ball();
addChild(ball);
ball.y = stage.stageHeight / 2;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event: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;
}
}
}
}
此例中，將緩動(dòng)公式分解使用，首先計算出距離，因為我們需要知道是否該停止緩動(dòng)。大家應該知道為什么要使用dx的絕對值了吧。如果小球在目標點(diǎn)的右邊，dx的值總是負的，if (dx < 1)的結果永遠為真，這就會(huì )使緩動(dòng)停止。而使用Math.abs，就可以判斷實(shí)際距離是否小于 1。
記住，如果將拖拽與緩動(dòng)相結合，要在放開(kāi)小球時(shí)，將運動(dòng)代碼重新啟用。
移動(dòng)的目標
上面例子中的目標點(diǎn)都是單一且固定的，這些似乎還不能滿(mǎn)足我們的要求。事實(shí)上，Flash 并不關(guān)心物體是否到達目標，或目標是否還在移動(dòng)。它只會(huì )問(wèn) “我的目標在哪里？距離有多遠？速度是多少？”，每幀都如此。因此，我們可以很容易將目標點(diǎn)改為鼠標所在的位置，只需將原來(lái) targetX和targetY的地方，改成鼠標的坐標 (mouseX和mouseY)。以下是一個(gè)比較簡(jiǎn)單的版本（EaseToMouse.as）：
package {
import flash.display.Sprite;
import flash.events.Event;
public class EaseToMouse extends Sprite {
private var ball:Ball;
private var easing:Number = 0.2;
public function EaseToMouse() {
init();
}
private function init():void {
ball = new Ball();
addChild(ball);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
var vx:Number = (mouseX - ball.x) * easing;
var vy:Number = (mouseY - ball.y) * easing;
ball.x += vx;
ball.y += vy;
}
}
}
移動(dòng)鼠標觀(guān)察小球跟隨情況，是不是距離越遠速度越快。
試想還有沒(méi)有其它可移動(dòng)的目標。當然還可以是一個(gè)影片向著(zhù)另一個(gè)影片緩動(dòng)。在早先的Flash 時(shí)代，鼠標追蹤者（mouse trailers）——即一串影片跟蹤者鼠標的效果——曾經(jīng)風(fēng)靡一時(shí)。緩動(dòng)就是制作這種效果的方法之一。第一個(gè)影片緩動(dòng)到鼠標上，第二個(gè)影片緩動(dòng)到第一個(gè)影片上，第三個(gè)再緩動(dòng)到第二個(gè)上，依此類(lèi)推。大家不妨一試。
緩動(dòng)不僅限于運動(dòng)
本書(shū)中，有很多簡(jiǎn)單的例子程序。在這些例子中，我們主要是計算影片所用變量的值。通常，使用x,y 屬性控制物體的位置。不過(guò)別忘了 Sprite 影片，影片剪輯以及各種顯示對象還有很多其它可以操作的屬性，而且基本都是用數字表示的。所以在讀例子程序時(shí)，也應該試用其它屬性代替這個(gè)例子中的屬性。下面給大家一些啟發(fā)。
透明度
將緩動(dòng)用在 alpha 屬性上。開(kāi)始設置為 0 ,目標設置為 1 ：
ball.alpha = 0;
var targetAlpha:Number = 1;
在 enterFrame. 函數中，使用緩動(dòng)可以實(shí)現影片淡入效果：
ball.alpha += (targetAlpha - ball.alpha) * easing;
若將 0和1 顛倒過(guò)來(lái)就可以實(shí)現影片的淡出效果。
旋轉
設置一個(gè) rotation 屬性和一個(gè)目標 rotation。當然，還需要一個(gè)能夠表現旋轉對象，比如一個(gè)箭頭(arrow)：
arrow.rotation = 90;
var targetRotation:Number = 270;
arrow.rotation += (targetRotation - arrow.rotation) * easing;
顏色
如果大家想挑戰一下，可以在 24 位色彩中使用緩動(dòng)。設置好 red,green,blue的初始值，使用緩動(dòng)單獨表現每一色彩元素的值，然后將它們再組合成 24 位色彩值。例如，我們可以從red 緩動(dòng)到 blue。初始顏色如下：
red = 255;
green = 0;
blue = 0;
redTarget = 0;
greenTarget = 0;
blueTarget = 255;
在 enterFrame. 處理函數中的每一幀執行緩動(dòng)。這里只表現一個(gè) red 值：
red += (redTarget - red) * easing;
再將這三個(gè)數值組合為一個(gè)數（如第四章介紹的）：
col = red << 16 | green << 8 | blue;
最后可以在 ColorTransform. （見(jiàn)第四章），線(xiàn)條顏色或填充色中使用該顏色值。
高級緩動(dòng)
現在我們已經(jīng)看到簡(jiǎn)單的緩動(dòng)效果是如何實(shí)現的了，大家也許正在考慮如何使用更復雜的緩動(dòng)公式制作一些效果。例如，在開(kāi)始時(shí)比較緩慢，然后漸漸開(kāi)始加速，最后在接近目標時(shí)再將速度慢下來(lái)?；蛘呦Ｍ谝欢螘r(shí)間或若干幀內完成緩動(dòng)效果。
Robert Penner 以收集、編制和實(shí)現緩動(dòng)公式而出名。我們可以在 www.robertpenner.com 中找到他的緩動(dòng)公式。在他寫(xiě)這些內容時(shí) AS 3 版本還沒(méi)有出現，但是用我們前面幾章所學(xué)知識，將它們轉化為 AS 3 版本的也是件非常容易的事。
OK，下面進(jìn)入Flash 中我最喜歡的一個(gè)主題：彈性運動(dòng)（Springing）。
聯(lián)系客服
