CVP认证学习笔记--(何小成)019--实现帧动画处理

概念

本节课的内容是通过帧的纹理定时切换就实现动画效果，游戏中的人物通常在每个状态都会有一个循环播放的动画，我们都知道动画的实质就是一帧一帧的画面，cocos中的动画实现就是将一张一张的图片衔接起来播放，一连贯性来达到一个动画的效果。

API

本节课的主要方法如下：

var animation=new cc.Animation();
animation.addSpriteFrameWithFile(frameName);
var act = cc.animate(animation).repeatForever();

其步骤就是先创建一个Animation，然后通过addSpriteFrameWithFile往Animation中添加精灵帧，然后将其封装为动画，精灵执行这个动画就可以实现帧动画播放。

作业

最后课程留下的作业是通过实现点击屏幕，让npc移动，并且能在转向时实现翻转，实际上在本周的第一节课程的作业中，我已经实现了这个效果，只是没有帧动画播放的过程，作业实现如下：

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ac:null,
    npcDirect:"right",
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();

        /////////////////////////////
        // 2. add a menu item with "X" image, which is clicked to quit the program
        //    you may modify it.
        // ask the window size
        var size = cc.winSize;
       //添加背景
        var bg=new cc.Sprite(res.bg_jpg);
        this.addChild(bg);
        bg.setPosition(size.width/2,size.height/2);
        //添加动画层
        var sphero=new cc.Sprite("res/walk01.png");
        var animation=new cc.Animation();
        for(var i=1;i<=5;i++)
        {
            var frameName="res/walk0"+i+".png";
            animation.addSpriteFrameWithFile(frameName);
        }
        animation.setDelayPerUnit(0.1);//300毫秒每帧
        this.ac=cc.animate(animation).repeatForever();//包装成动作
        this.addChild(sphero);
        sphero.setTag(1);
        sphero.setPosition(200,200);
        return true;
    },
    onEnter:function(touch,event){
       this._super();
        //添加触屏事件
       cc.eventManager.addListener({
           event:cc.EventListener.TOUCH_ONE_BY_ONE,
           swallowTouches:true,//吞噬事件 不再传递
           onTouchBegan:this.touchbegan,
           onTouchMoved:this.touchmoved,
           onTouchEnded:this.touchended
       },this);
    },
    touchbegan:function(touch,event){
        var x = touch.getLocation().x;
        var y = touch.getLocation().y;
        var bn = event.getCurrentTarget().getChildByTag(1);
        // 走路时间
        var time = Math.round(Math.sqrt(Math.pow(x-bn.getPositionX(),2)+Math.pow(y-bn.getPositionY(),2)))/100;
        bn.stopAllActions();
        if(event.getCurrentTarget().npcDirect=="right"&&x<bn.getPositionX()){
            // 转向
            event.getCurrentTarget().npcDirect = "left";
            bn.runAction(cc.flipX(true));// 水平翻转
        }else if(event.getCurrentTarget().npcDirect=="left"&&x>bn.getPositionX()){
            // 转向
            event.getCurrentTarget().npcDirect = "right";
            bn.runAction(cc.flipX(false));// 翻转回来
        }
        cc.log(event.getCurrentTarget().ac);
        // 执行走路动画
        bn.runAction(event.getCurrentTarget().ac);
        bn.runAction(cc.sequence(cc.moveTo(time,cc.p(x,y)),cc.callFunc(function(bn){
            // 移动动作完成之后停止精灵的动画，并设置精灵图片为第一张
            bn.stopAllActions();
            bn.setTexture("res/walk01.png");
        },bn)));
        return true;
    },
    touchmoved:function(touch,event){
        
    },
    touchended:function(touch,event){

    }
});

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

最终效果

http://www.cocoscvp.com/usercode/2016_04_24/f5abb96ca567c25d6c217acbad8daee4aad15b1e/