Flash交互設計-09AS30動畫編程

1、第9章 AS3.0動畫編程 動畫是Flash創(chuàng)作的基礎，從最初的幀補間動畫到現(xiàn)在的動畫編程，F(xiàn)lash動畫制作走出了一條非常圓滿的道路。ActionScript 3.0的動畫編程主要關注兩方面的情形：一是通過改變顯示對象的屬性創(chuàng)建動畫效果；二是利用Shape類的繪制類進行代碼繪制，渲染效果。 ActionScript 3.0動畫編程要涉及數學、物理學等方面的內容非常的多，也比較復雜。在本章先介紹兩種基本的動畫實現(xiàn)原理并創(chuàng)建簡單的動畫效果。對于數學和物理學的基礎知識，則留到后面的章節(jié)具體詳細的講述。9.1 可視化動畫編程簡介動畫是指控制顯示對象隨著時間不斷的發(fā)生變化，這些變化可能是位置的變動，速

2、度的變化，外觀形狀的改變，顏色透明度的改變等等?？偠灾?，動畫可以實現(xiàn)的形式是紛繁多樣的。借用一句口語“只有想不到，沒有做不到”，只要能夠想到的效果，在Flash中都能夠實現(xiàn)。最早版本的Flash中，使用逐幀動畫和補間動畫來實現(xiàn)動畫效果，一個顯示對象放于一個關鍵幀上，然后插入另一個關鍵幀，改變第二個關鍵幀中顯示對象的顯示屬性，然后兩幀之間通過差值計算形成完整的事件軸動畫?？梢暬膭赢嬀幊?，伴隨ActionScript腳本語言的出現(xiàn)開始逐漸的興起。從早期ActionScript中的“三幀法”動畫編程，逐步發(fā)展到onClipEvent(enterframe)、onEnterFrame循環(huán)事件，Ac

3、tionScript動畫編程中幀循環(huán)起著至關重要的作用。9.2 動畫編程原理和所有的動畫顯示一樣，F(xiàn)lash的動畫原理也是通過不斷的刷新屏幕，利用每次屏幕上顯示對象位置的不同、大小色彩的變化等產生動畫效果。動畫編程的關鍵是一定要有變化，而且該變化需要在一定時間內來完成。Flash中使用幀頻來控制每秒鐘刷新屏幕的次數，通過使用的幀頻的范圍在1260幀每秒，推薦使用的是24幀每秒這樣的一個速度。ActionScript 3.0的動畫編程也是同樣的原理，通過不斷的刷新屏幕來實現(xiàn)動畫效果。ActionScript 3.0的動畫編程按照實現(xiàn)的方式可以分為兩種：對顯示對象的顯示屬性進行控制，調整每次刷新屏

4、幕時顯示對象的顯示屬性實現(xiàn)動畫效果，這種稱為顯示屬性動畫。利用繪制API在每幀中使用代碼繪制不同的形狀，從而產生的動畫效果，這種稱為代碼繪制動畫。通過編程實現(xiàn)刷新屏幕，ActionScript 3.0中提供了兩種方式可供選擇：幀循環(huán)更新：利用Flash本身的幀頻速度，在每次刷新屏幕時改變顯示對象。此方法需要使用事件偵聽器偵聽顯示對象的Event.ENTER_FRAME事件。定時器更新：利用Timer類的定時更新功能，每隔一定的事件使顯示對象改變一次。此方法需要使用事件偵聽器偵聽顯示對象的TimerEvent.TIMER事件。9.3 代碼繪制動畫效果 代碼繪制動畫效果，就是每幀繪制的圖形有所變化

5、，這樣播放起來就形成了動畫。繪制代碼主要使用Graphics類的繪制API來進行繪制。 下面創(chuàng)建一個非常流行的電流動畫效果。其實現(xiàn)原理為：首先在水平方向每隔3個像素進行繪制，而豎直方向的繪制點可以在一個位置附近隨機變化，這樣形成一條隨機彎曲的線條；然后使用幀循環(huán)事件，每幀重新繪制一次，實現(xiàn)線條的隨機變化，進而實現(xiàn)最終的電流效果。9.4 改變對象屬性 本節(jié)將通過改變舞臺的顯示屬性來實現(xiàn)一系列的動畫效果。這些效果大體分為兩部分：一部分是與運動相關的動畫，主要是通過修改顯示對象的坐標來實現(xiàn)。此部分將會介紹一些物理運動學的基礎知識。另一部分通過改變顯示對象的縮放屬性、旋轉屬性和透明度屬性，實現(xiàn)顯示和形

6、狀動畫9.4.1 移動物體要實現(xiàn)移動舞臺的效果，只需改變坐標屬性即可。修改橫坐標可以實現(xiàn)水平運動的效果，修改縱坐標可以實現(xiàn)豎直運動的效果。在物理學中，物體運動的快慢是用速度來描述的。速度反映了物體在單位時間內發(fā)生的位移的大小。對于勻速運動的物體，位移的大小等于速度乘以時間。在Flash中，實現(xiàn)物體的運動，運算的原理是：確定速度大小，幀循環(huán)刷新時原來的位置坐標加上速度的值。原理主要公式如下：var _vx:Number=水平速度值var _vy:Number=豎直速度值顯示對象.x+=vx顯示對象.y+=vy9.4.2 加速運動的物體 在物理學中，物體運動的快慢是用速度來描述的，而速度變化的快慢

7、是用加速度來描述的。加速度反映了物體在單位時間內速度變化的快慢。 加速度和速度關系的公式為： v=v+a vx+=ax vy+=ay9.4.3 減速運動的物體 物理學中，簡單的減速運動和加速運動一樣，利用加速度的值來改變速度的值，進而實現(xiàn)物體的位置變化。但加速運動加速度為正值，減速運動的加速度為負值。當然，也可以通過速度減去一個正的加速度實現(xiàn)減速運動的效果。 減速運動中加速度（此處按照加速度為正值）和速度關系的公式為： v=v-a vx-=ax vy-=ay9.4.4 鼠標跟隨緩動效果在Flash中最常見的緩動效果，就是一個顯示對象先快后慢，逐漸的移動到目的地。這也是一個減速運動的過程，不過運

8、動過程中的加速度會發(fā)生改變。二次緩動是最常用的，通過每次前進當前位置和目標位置之間距離的二分之一，如此重復的操作，知道最后無限的接近目標點。但是這樣永遠無法實現(xiàn)達到目標點，所以一般控制當前位置和目標位置之間的距離小于1象素時，可以近似認為已經達到了目標點。二次緩動的計算公式為：dx=目標位置.x-當前位置.xdy=目標位置.y-當前位置.yvx=(dx)/2vy=(dy)/29.4.5 利用三角函數實現(xiàn)運動效果數學中三角函數的正弦和余弦函數是對物體的運動非常有用的函數。這兩個函數都具有周期性，其值范圍為-11，而且由于周期性，其值能夠在-11之間循環(huán)變化。利用這些特點，可以實現(xiàn)顯示對象周期性的

9、往復運動效果。關于三角函數的知識請參見數學和數字一章的內容。下面的示例利用正弦三角函數實現(xiàn)小球在平衡位置附近的往復運動。其實現(xiàn)流程為：創(chuàng)建一個小球加入場景創(chuàng)建幀循環(huán)事件處理函數利用幀循環(huán)事件，實現(xiàn)小球的運動。使用文檔類：MoveSin，9.4.6 縮放動畫效果 要實現(xiàn)縮放效果，只需實現(xiàn)不斷修改顯示對象的縮放屬性scaleX和scaleY即可。 下面的示例通過修改矩形的scaleY屬性，實現(xiàn)矩形縮放效果。其實現(xiàn)流程為：創(chuàng)建一個小球加入場景創(chuàng)建幀循環(huán)事件處理函數，實現(xiàn)縮放操作利用幀循環(huán)事件，實現(xiàn)小球的縮放。使用文檔類：Scale，9.4.7 旋轉動畫效果 要實現(xiàn)旋轉一個顯示對象的動畫效果，只需要修

10、改rotation屬性即可。 下面的示例用一個箭頭來實現(xiàn)鼠標跟隨效果，跟隨鼠標的箭頭的指向會隨著鼠標位置的變化而發(fā)生旋轉。其實現(xiàn)流程為：創(chuàng)建一個小球加入場景創(chuàng)建幀循環(huán)事件處理函數，實現(xiàn)旋轉效果利用幀循環(huán)事件，實現(xiàn)小球的旋轉。使用文檔類：Rotation，9.4.8 淡入淡出動畫效果淡入淡出效果也是Flash動畫制作中最常用的一種技術，此技術的實現(xiàn)是通過改變顯示對象的透明度alpha屬性實現(xiàn)的。下面的示例實現(xiàn)小球的淡入淡出效果。創(chuàng)建一個小球加入場景創(chuàng)建幀循環(huán)事件處理函數，實現(xiàn)顯示對象透明度先逐漸增加，當透明度為1時逐漸減少，減少到1時再逐漸增加，通過循環(huán)實現(xiàn)淡入淡出效果利用幀循環(huán)事件，實現(xiàn)小球的

11、淡入淡出。使用文檔類：Alpha，9.5 借助Timer類實現(xiàn)動畫效果使用Timer類產生的動畫效果和使用幀循環(huán)ENTER_FRAME事件產生動畫的原理一樣，都是通過間隔一定的時間進行一次刷屏來實現(xiàn)動畫效果。上一節(jié)中使用幀循環(huán)事件創(chuàng)建的一切動畫，都可以是Timer類的事件來實現(xiàn)。要注意Timer類的TimerEvent.TIMER事件，可能與Flash的刷屏不同步，會產生延遲現(xiàn)象。所以在使用的時候，需要使用updateAfterEvent()方法強制更新屏幕。使用Timer類實現(xiàn)動畫還有幾個好處：可以利用Timer.stop()方法控制動畫的播放與停止；可以在構建Timer對象時控制動畫的刷新

12、次數，實現(xiàn)預期動畫效果；可以利用TimerEvent.TIMER_COMPLETE事件，在停止播放時偵聽，從事開始新的動作。9.6 Tween類創(chuàng)建動畫效果 在ActionScript 2.0中內建的Tween類都被轉移到了ActionScript 3.0的fl. transitions包中，用于實現(xiàn)運動、變形等動畫效果。本節(jié)主要介紹常用的運動、變形Tween類。9.6.1 Tween類應用基礎在ActionScript 3.0中，使用Tween類，可以通過指定操作目標的影片剪輯屬性在一定的幀數或者時間內創(chuàng)建動畫效果，進而實現(xiàn)影片剪輯的運動動畫，縮放動畫，淡入淡出動畫等顯示效果。在Tween類

13、中還可以指定緩動方法，從而實現(xiàn)非線形變化效果。“緩動”是指動畫在運行期間的速度非線形變化，使動畫顯得更加的形象逼真。Tween類中的緩動方法位于fl.transitions.easing包中，該包提供了多種緩動方法供用戶使用。要利用Tween類創(chuàng)建動畫效果，需要先創(chuàng)建一個Tween對象，使用該對象來指定要控制的顯示對象的屬性要發(fā)生什么樣的變化。創(chuàng)建Tween類對象的方法如下所示。Tween(目標對象,目標對象的屬性,緩動方式,初始值,結束值,動畫持續(xù)時間,記時方式);9.6.2 運動折返效果 返回類實現(xiàn)的動畫是在動畫執(zhí)行的開始端、結束端或者兩端兼有回返動作，用以模擬溢出動畫效果。執(zhí)行動畫的方法

14、取決于三個緩動函數： easeIn：在動畫開始時往后運動，然后反向朝目標移動。 easeOut：在動畫結束時稍微沖過結束點，然后倒轉方向回來朝著目標。 easeInOut：在動畫開始時先向后運動，再倒轉方向并朝目標移動，結束時沖過目標，然后再倒轉方向，朝目標移動。9.6.3 運動回彈效果回彈類實現(xiàn)的動畫是在動畫的起始端，結束端或者兩端兼有執(zhí)行回彈動畫效果。具體在何端回彈同樣取決于三個緩動函數。回彈的次數取決于動畫持續(xù)的時間，持續(xù)的時間越長，回彈的次數越多。此效果可以實現(xiàn)舞臺中小球跳動的動畫效果。Bounce類的三個回彈函數效果：easeIn：在動畫開始時以較慢速度開始回彈運動，然后再執(zhí)行時加快

15、運動速度。easeOut：在動畫結束時以較快速度開始回彈運動，然后再執(zhí)行時減慢運動速度。easeInOut：在動畫開始時緩慢地開始跳動，進行加速運動，最后進行減速。9.6.4 正弦彈性效果Elastic類實現(xiàn)的動畫是在動畫的起始端，結束端或者兩端兼有執(zhí)行彈性動畫效果，運動方式按照正弦波逐漸衰減進行。具體在何端回彈同樣取決于三個緩動函數?；貜椀拇螖挡皇軇赢嫵掷m(xù)的時間影響。此效果也可以實現(xiàn)舞臺中小球跳動的動畫效果。Elastic類的三個回彈函數效果，此類和Bounce基本類似，區(qū)別在與彈性采用正弦方式：easeIn：在動畫開始時以較慢速度開始回彈運動，然后再執(zhí)行時加快運動速度。easeOut：在動

16、畫結束時以較快速度開始回彈運動，然后再執(zhí)行時減慢運動速度。easeInOut：在動畫開始時緩慢地開始跳動，進行加速運動，最后進行減速。9.6.5 Regular和Strong運動效果 Regular類實現(xiàn)的動畫是加速運動、減速運動和先加速后減速的動畫效果。具體在方式同樣取決于三個緩動函數。 Regular類的三個回彈函數效果： easeIn：在動畫開始時做初速度為零的加速運動。 easeOut：動畫執(zhí)行勻減速運動，末速度為零。 easeInOut：在動畫開始時做初速度為零的加速運動，然后做減速運動，直到速度為零。9.6.6線性運動效果 None類實現(xiàn)的是一種線形運動的效果，顯示對象一直做運動運

17、動。其方法函數有四種easeIn()、easeOut()、easeInOut()和easeNone()，這四種方法實現(xiàn)的是相同的效果，在執(zhí)行時都是勻速直線運動。使用時可以任意選擇。9.7 TransitionManger創(chuàng)建動畫效果 在ActionScript 2.0中內建的TransitionManger類也被轉移到了ActionScript 3.0的fl. transitions包中，用于實現(xiàn)頁面切換動畫效果。本節(jié)主要介紹常用的TransitionManger類。9.7.1 TransitionManger用法基礎TransitionManger類管理了一系列的過渡動畫效果。通過使用這些效

18、果，可以很方便的實現(xiàn)頁面之間的切換操作。TransitionManger類提供了10中不同的切換效果，把這些切換效果應用于影片剪輯，就能實現(xiàn)很漂亮的過渡效果。這些類同樣位于fl.transitions包中。要使用TransitionManger類實現(xiàn)過渡動畫效果，需要先創(chuàng)建該類的實例。ActionScript 3.0中創(chuàng)建改類的實例的方法有兩種。TransitionManager.start()方法，用法格式如下所示。TransitionManager.start(目標影片,過渡對象參數);目標影片：指過渡效果作用的影片。注意，只能時影片剪輯實例。過渡對象參數：對象，包含所有的過渡參數的集合。

19、對象應包含type參數，該參數指示要應用的過渡效果類。此外，還必須包括該過渡效果類所必需的任何參數。9.7.2 遮簾過渡Blinds效果此過渡實現(xiàn)影片剪輯逐漸消失或逐漸出現(xiàn)的矩形來顯示的過渡動畫效果，類似于百葉窗效果。該過渡對象參數為：type:Blinds, direction:Transition.IN,duration:2,easing:None.easeNone,numStrips:10,dimension:0;參數說明：type：指明采用10種過渡效果中的那一種，所有的過渡效果共有參數。direction：有兩種形式Transition.IN和Transition.OUT，指明過渡動

20、畫的方向，共有參數。duration：過渡動畫持續(xù)時間，共有參數。easing：過渡動畫補間效果，fl.transitions或fl.transitions.easing 包中的一種效果，共有參數。numStrips：“遮簾”效果中的遮罩條紋數，推薦在150之間，獨有參數。dimension：指明遮罩條紋是垂直的(0)還是水平的(1)，獨有參數。9.7.3 淡化過渡Fade效果此過渡實現(xiàn)影片剪輯淡入淡出的動畫效果。該過渡對象參數為：type:Fade, direction:Transition.IN, duration:9, easing:Strong.easeOut說明：此效果只使用共有參數

21、，不需要其它參數。下面的示例在Flash CS3中使用導入一副圖片，然后放入影片剪輯中，放入舞臺，命名為mc，下面的代碼控制mc實現(xiàn)淡入淡出動畫效果。打開動作面板，輸入下面的代碼：import fl.transitions.*;import fl.transitions.easing.*;TransitionManager.start(mc, type:Fade, direction:Transition.IN, duration:20, easing:Strong.easeOut);9.7.4 飛行過渡Fly效果此過渡實現(xiàn)影片剪輯從指定方向飛入的動畫效果。該過渡對象的對象參數為：type:F

22、ly, direction:Transition.IN, duration:3, easing:Elastic.easeOut, startPoint:9參數說明：startPoint：指明起始位置的整數，范圍19，分別為：左上：1、上中：2、右上：3、左中：4、中心：5、右中：6、左下：7、下中：8、右下：9。獨有參數。下面的示例在Flash CS3中使用導入一副圖片，然后放入影片剪輯中，放入舞臺，命名為mc，下面的代碼控制mc實現(xiàn)飛行過渡動畫效果。打開動作面板，輸入下面的代碼：import fl.transitions.*;import fl.transitions.easing.*;Tr

23、ansitionManager.start(mc, type:Fly, direction:Transition.IN, duration:20, easing:Strong.easeOut,startPoint:9); 9.7.5 光圈過渡Iris效果此過渡實現(xiàn)影片剪輯以縮放的方形或圓形動畫遮罩來顯示動畫效果。該過渡對象參數為：type:Iris, direction:Transition.IN, duration:2, easing:Strong.easeOut, startPoint:5, shape:Iris.CIRCLE參數說明：startPoint：指明起始位置的整數；范圍19，分

24、別為：左上：1、上中：2、右上：3、左中：4、中心：5、右中：6、左下：7、下中：8、右下：9。shape：有兩種，為fl.transitions.Iris.SQUARE（方形）和fl.transitions.Iris.CIRCLE（圓形）的遮罩形狀。9.7.6 照片過渡Photo效果此過渡實現(xiàn)影片剪輯對象像放映照片一樣出現(xiàn)或消失的效果。該過渡對象參數為：type:Photo, direction:Transition.IN, duration:1, easing:None.easeNone說明：此效果只使用共有參數，不需要其它參數。下面的示例在Flash CS3中使用導入一副圖片，然后放入影

25、片剪輯中，放入舞臺，命名為mc，下面的代碼控制mc實現(xiàn)照片過渡動畫效果。打開動作面板，輸入下面的代碼：import fl.transitions.*;import fl.transitions.easing.*;TransitionManager.start(mc, type:Photo, direction:Transition.IN, duration:10, easing:None.easeNone);9.7.7 像素溶解過渡PixelDissolve效果此過渡使用隨機出現(xiàn)或消失的棋盤圖案矩形來顯示或隱藏影片剪輯對象。該過渡對象參數為：type:PixelDissolve, direct

26、ion:Transition.IN, duration:2, easing:Regular.easeIn, xSections:10, ySections:10參數說明：xSections：指明沿水平軸的遮罩矩形部分的數目。推薦的范圍150。ySections：指明沿垂直軸的遮罩矩形部分的數目。推薦的范圍150。下面的示例在Flash CS3中使用導入一副圖片，然后放入影片剪輯中，放入舞臺，命名為mc，下面的代碼控制mc實現(xiàn)像素溶解動畫效果。打開動作面板，輸入下面的代碼：import fl.transitions.*;import fl.transitions.easing.*;Transit

27、ionManager.start(mc, type:PixelDissolve, direction:Transition.IN, duration:10, easing:Regular.easeIn, xSections:30, ySections:30);9.7.8 旋轉過渡Rotate效果 此過渡實現(xiàn)影片剪輯旋轉動畫效果。該過渡對象參數為： type:Rotate, direction:Transition.IN, duration:3, easing:Strong.easeInOut, ccw:false, degrees:720 參數說明： ccw：Boolean值：false表示順時針旋轉；true表示逆時針旋轉。 degrees：指明顯示對象要旋轉的度數。推薦范圍19999。旋轉一周為360度。9.7.9 擠壓過渡Squeeze效果此過渡實現(xiàn)水平或垂直縮放影片剪輯對象。過渡對象參數為：type:Squeeze, direction:Transition.IN, duration:2, easing:E