Flash AS3教程：Motion類

2020-07-17 13:17:47

字體：大中小

來源：轉載

供稿：網友

前面教程學習了Flash AS3教程：Random類，這篇我們一起來學習Motion類的使用方法和實例。
先來一個例子展示：
http://www.49028c.com/files/media/Motion.swf

這個類貌似是多余的，反正就是Tween類，但是解決了動畫可能播到一半就停止了等問題，Tween播放到一半就停止了原因是因為類中的偵聽EnterFrame事件的時候，使用的是弱引用偵聽方式，在播放的途中，被內存自動回收了，因此播放到一半就夭折了，解決辦法嘛，除了自己寫一個，也可以去包中改一下Tween，把偵聽改成強引用就行了
我個人是不太習慣使用Tween的，因此我就寫了這個類，自己使用嘛，大家覺得還不錯就拿去用吧
緩動的算法還是使用ADOBE自帶的那個easing包
這個類屬性和方法比較多。。耐心看吧，跟Tween差不了太多的

類講解：
index.base.animation.Motion類：
代碼：public class Motion extends EventDispatcher
提供給程序員使用的動畫類

構造函數：
public function Motion(target_:*,_attribute:String,_algorithm:Function,_begin:Number,_end:Number,_duration:uint = 10)
與Tween一模一樣，只不過最后少了個屬性是是否以時間計算緩動，而該類只有以幀頻計算緩動

play方法：
public function play():void
開始播放，并觸發播放事件
如果正在播放，調用該方法不會有什么變化，只不過會觸發播放事件

back方法：
public function back():void
同于play方法，不同的是該方法是讓動畫反過來播放

resume方法：
public function resume():void
繼續播放，依然會觸發播放事件

stop方法：
public function stop():void
停止播放，觸發停止事件
如果是播放完畢了，即還會觸發播放完畢事件
停止事件永遠比播放完畢事件提前調度

reset方法：
public function reset():void
重置動畫，還原到剛開始實例化的狀態
無論是否正在播放，都會觸發停止事件

forward方法：
public function forward():void
快進到最后

rewind方法：
public function rewind():void
倒帶到最前

next方法：
public function next():void
向前播放一幀
如果是在播放中使用該方法，效果不是太明顯

prev方法：
public function prev():void
向前播放一幀
如果是在播放中使用該方法，效果不是太明顯

clear方法：
public function clear():void
清除類中的引用，事件等

isBack屬性（只讀）：
public function get isBack():Boolean
是否在回放狀態

target屬性（只讀）：
public function get target():*
獲取當前操作的對象

current屬性（只讀）：
public function get current():uint
獲取當前播放的位置

playing屬性（只讀）：
public function get playing():Boolean
是否正在播放

attribute屬性：
public var attribute:String;
設置操作的對象屬性，沒必要的情況下最好不要修改

begin屬性：
public var begin:Number;
設置操作的對象初始屬性，沒必要的情況下最好不要修改

end屬性：
public var end:Number;
設置操作的對象結束屬性，沒必要的情況下最好不要修改

duration屬性：
public var duration:uint;
設置對象從初始值，經過多少幀，才運動到結束值

algorithm屬性：
public var algorithm:Function;
設置對象從初始值到結束值是以什么算法進行運動

受保護的屬性：
protected var _current:uint = 0;
protected function updata(isInit:Boolean = false):void
如果繼承該類，則可以訪問_current屬性和updata方法，可以直接修改當前幀和強制更新屏幕

舉例：（上面那個展示flash的源代碼）
對于各種不同的算法，進行效果展示，小小的偷了一下懶，使用的flash自帶組件。。

CODE:
import fl.transitions.easing.*; import index.base.animation.Motion; import index.base.events.MotionEvent; //算法數組 var classAr:Array = [Back,Bounce,Elastic,None,Regular,Strong]; //初始小方塊 var mc:MC = new MC; mc.y = 150; addChild(mc); //動畫聲明 var motion:Motion = new Motion(mc,"x",Back.easeIn,50,350,40); motion.addEventListener(MotionEvent.MOTION_UPDATA,motionUpdataFun); motion.addEventListener(MotionEvent.MOTION_STOP,motionStopFun); motion.addEventListener(MotionEvent.MOTION_PLAY,motionPlayFun); motion.addEventListener(MotionEvent.MOTION_FINISH,motionFinishFun); motion.play(); //動畫播放完畢 function motionFinishFun(e:MotionEvent){ traceText.appendText("播放完畢/n"); motion.isBack ? motion.play() : motion.back(); traceText.scrollV = traceText.maxScrollV; } //屏幕更新 function motionUpdataFun(e:MotionEvent){ currentText.text = motion.current.toString(); traceText.appendText("屏幕更新，當前幀 " motion.current "，X屬性：" mc.x "/n"); traceText.scrollV = traceText.maxScrollV; } //動畫播放 function motionPlayFun(e:MotionEvent){ traceText.appendText("開始播放/n"); traceText.scrollV = traceText.maxScrollV; } //動畫停止 function motionStopFun(e:MotionEvent){ traceText.appendText("停止播放/n"); traceText.scrollV = traceText.maxScrollV; } //偵聽各個面板的change事件 classList.addEventListener("change",changeFun); funcList.addEventListener("change",changeFun); durationBar.addEventListener("change",changeFun); playButton.addEventListener("click",clickFun); //當屬性面板發生數值改變，即觸發 function changeFun(e:Event){ motion.rewind(); motion.algorithm = classAr[classList.selectedItem.data][funcList.selectedItem.data]; motion.duration = durationBar.value; durationText.text = durationBar.value.toString(); } //播放按鈕 function clickFun(e:Event){ if(playButton.selected) motion.resume(); else motion.stop(); } //4個倒帶前進等按鈕事件 prevButton.addEventListener(MouseEvent.CLICK,function(){motion.prev()}); nextButton.addEventListener(MouseEvent.CLICK,function(){motion.next()}); forwardButton.addEventListener(MouseEvent.CLICK,function(){motion.forward()}); rewindButton.addEventListener(MouseEvent.CLICK,function(){motion.rewind()});