当前位置: 主页 > 平面设计 > Flash AS3教程:Motion类

Flash AS3教程:Motion类

  • 2021-12-25
  • 来源/作者: PS.ONEGREEN.ORG    / 佚名    
  • 2 次浏览

  前面教程学习了Flash AS3教程:Random类,这篇我们一起来学习Motion类的使用方法和实例。

  这个类貌似是多余的,反正就是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("播放完毕
");
    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 + "
");
    traceText.scrollV = traceText.maxScrollV;
}
//动画播放
function motionPlayFun(e:MotionEvent){
    traceText.appendText("开始播放
");
    traceText.scrollV = traceText.maxScrollV;
}
//动画停止
function motionStopFun(e:MotionEvent){
    traceText.appendText("停止播放
");
    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()});