熟悉Flash的人都知道,Flash中控制动画的方式有很多,基本的有play,stop,gotoAndPlay,gotoAndStop,这些在Flax中均得到了很好的实现,并且更加灵活。

先看在线示例

示例代码

var SkeletonAndControl = BaseScene.extend({
    skeleton:null,
    ctrPanel:null,
    onEnter:function(){
        this._super();
        //产生动画
        //Create a skeleton animation
        this.skeleton = flax.assetsManager.createDisplay(res.skeleton, "monkey", {parent:this, x: cc.visibleRect.center.x - 100, y: cc.visibleRect.center.y});
        //Auto play children's animation when monkey playing, so the monkey can blink his eyes when gotoAndPlay("idle")
        //当播放这个骨骼动画时,自动播放子元素动画, 所以猴子在gotoAndPlay("idle")时可以眨眼
        this.skeleton.autoPlayChildren = true;
        //侦听每一帧改变事件:渲染一帧调用一次,频率为动画本身的fps
        //Listening the frame change signal, one callback one frame, the rate is according by the fps of the animation
        this.skeleton.onFrameChanged.add(this._onFrameChanged, this);
        //侦听动画完毕事件:如果是play(),最后一帧发出;如果是gotoAndPlay("anim"), anim动画的最后一帧发出
        //Listening the animation over signal, if tricked by play(), sent on the last frame;
        //or if gotoAndPlay("anim"), sent on the last frame of the animation "anim"
        this.skeleton.onAnimationOver.add(this._onAnimationOver, this);
        //侦听序列动画完毕事件: 当playSequence或playSequenceLoop时,在一个sequence结束时发出
        //Listening the animation sequence signal, sent when playSequence or playSequenceLoop is over
        this.skeleton.onSequenceOver.add(this._onSequenceOver, this);
        //控制面板
        //Control panel
        this.ctrPanel = flax.assetsManager.createDisplay(res.skeleton, "ControlPanel", {parent:this});
        //侦听按钮事件
        //Listening the buttons click
        var children = this.ctrPanel.getChildren();
        for(var i = 0; i < children.length; i++){
            var child = children[i];
            if(flax.isButton(child)){
                flax.inputManager.addListener(child, this._controlAnim, InputType.click, this);
            }
        }
        this._onFrameChanged(0);
    },
    _controlAnim:function(touch, event)
    {
        var btn = event.currentTarget;
        cc.log("Command: " + btn.label.text);
        //执行动画控制命令
        //Execute the animation control command
        eval("this.skeleton."+btn.label.text);
        //Replace the head with anotherHead
        if(this.skeleton.head){
            this.skeleton.replaceChild("head", "anotherHead");
        }
    },
    _onFrameChanged:function(frame)
    {
        //注: frame即this.skeleton.currentFrame
        //Note: frame is just the same as this.skeleton.currentFrame
        this.ctrPanel.infoTxt.text = "FPS: " + this.skeleton.fps +", currentFrame: " + frame + ", playing: " + this.skeleton.playing + "\ncurrentLabel: " + this.skeleton.currentLabel + ", currentAnim: " + this.skeleton.currentAnim;
    },
    _onAnimationOver:function(sprite)
    {
        this._showMsg("Animation over!");
    },
    _onSequenceOver:function(sprite)
    {
        this._showMsg("Sequence over!");
    },
    _showMsg:function(msg)
    {
        //注意第四个参数为true,对象销毁时将放入对象池,产生的时候优先从对象池拿取
        //Note the forth param is true, which means the animation will be put in the object pool when destroy
        //And fetch a new one from the pool
        var infoAnim = flax.assetsManager.createDisplay(res.skeleton, "InfoAnim", {parent: this, x : 140 + Math.random()*400, y : 300 + 500*Math.random()}, true);
        //文本信息
        //Text message
        infoAnim.info.txt.text = msg;
        //autoDestroyWhenOver: 表示动画完毕时,自动销毁,适合特效类动画 (Means auto destroy when animation is over, is good choice for effect animation)
        //autoStopWhenOver: 动画完毕时停在当前帧 (Stop at the current frame when animation is over)
        //autoHideWhenOver: 动画完毕时自动隐藏 (Hide itself when animation is over)
        infoAnim.autoDestroyWhenOver = true;
        //开始播放 (Start play animation)
        infoAnim.play();
    }
})

全部示例的Github源码

日期:2014年12月24日 作者:longames