Cocos2d-JS中使用Cocos Studio资源05：帧动画

代码:http://download.csdn.net/detail/chuanyu/8994361

转： http://cn.cocos2d-x.org/tutorial/show?id=2834

1.动画编辑界面

获取 attack 按钮：

attackButton = ccui.helper.seekWidgetByName(frameAnimationScene, "btn_attack");
为attack按钮添加监听函数：

attackButton.addTouchEventListener(this.buttonTouchEvent);

此界面 动画编辑面板处绿色的 Attack(0,30) 表明 从第0帧到第30帧为Attack动画，到时候代码只需调用 

shark.gotoFrameAndPlay(0,30,false);  或者

shark.play("Attack",false); 就能调用此动画了

2.代码编辑

app.js 代码：

var HelloWorldLayer = cc.Layer.extend({
    sharkNode:null,
    attackButton:null,
    frameAnimationScene:null,
    shark:null,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();


        /////////////////////////////
        //第一步:
        //加载frameAnimation界面的JSON资源分析，并获取frameAnimationScene对象。
        frameAnimationScene = ccs.load(res.MainScene_json).node;
        //将frameAnimationScene对象加入到layer中。
        this.addChild(frameAnimationScene);


        //第二步:
        //从frameAnimationScene中获取动画节点依附的节点对象
        //通过该对象可以实现对动画节点的一些移动等操作，如：MoveBy,MoveTo等。
        sharkNode = frameAnimationScene.getChildByName("ProjectNode_1");


        //获取三个Button，并注册事件处理函数
        attackButton = ccui.helper.seekWidgetByName(frameAnimationScene, "btn_attack");
        attackButton.addTouchEventListener(this.buttonTouchEvent);


        //第三步:运行动画前的准备工作
        //从动画节点中获取ActionTimeLine。
        shark = ccs.load(res.general_shark_json).action;
        frameAnimationScene.runAction(shark);


        //第四步:设置帧事件监听，每一帧一次监听。
        //正常情况下应该使用如下语句:
        //shark.setFrameEventCallFunc(this.frameAnimationEvent);
        //换个角度解决问题，每一帧动画都会触发update事件。然后在update中写事件处理内容。
        this.scheduleUpdate();


        return true;
    },
    changeButtonBright:function(){
        //将各个按钮设为禁用状态。禁用触摸响应。
        attackButton.setBright(false);
        attackButton.setTouchEnabled(false);
    },
    buttonTouchEvent:function(sender,type){
        //三个按钮的事件处理函数
        switch (type) {
            case ccui.Widget.TOUCH_ENDED:
                switch (sender.getName()) {
                    //可以通过两种方式设置动画的播放。
                    //推荐第二种！！！！
                    case "btn_attack":
                        //第一种
                        //通过设置开始帧，结束帧，是否循环播放等进行播放动画
                        shark.gotoFrameAndPlay(0,30,false);
                        //将按钮设为禁用状态。
                        this.changeButtonBright();
                        break;
                    case "deadattackButton":
                        //第二种
                        //通过player函数播放指定名称的动画
                        shark.play("DAttack",false);
                        self.changeButtonBright();
                        break;
                    case "deadButton":
                        shark.play("Dead",false);
                        this.changeButtonBright();
                        //死的时候，先往前走几步，倒下死亡，再滑回来。
                        sharkNode.runAction(cc.Sequence(cc.MoveBy(0.5,cc.p(-100, 0)),cc.MoveBy(2,cc.p(100, 0))));
                        break;
                    default:
                        break;
                }
                break;
            default:
                break;
        }
    },
    update:function(){
        //换个角度解决问题，现在在这里处理每一帧的事件。
        //判断动画是否在播放，如果在播放，则使所有按钮处于“禁用状态”
        //从而来模仿“技能冷却”的使用。
        if(!shark.isPlaying()){
            //如果动画不在播放状态，则将处于禁用的技能激活。
            if(!attackButton.isBright()){
                attackButton.setBright(true);
                attackButton.setTouchEnabled(true);
            }
        }
    },
    frameAnimationEvent:function(frame){
        //正常情况下，应该在这里处理每一帧的事件。
        cc.log("Frame Animation Event");
    }
});


var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});