CVP认证学习笔记--李天宇020实现切图帧动画

帧动画的切换实际上是把所需要的帧动画放在一个缓存器里.首先创建数组，用textureCache添加图片到缓存中。然后添加帧序列，将序列添加到数组中。部分代码如下：

ctor:function () {

        this._super();

       //添加背景

       var bg=new cc.Sprite(res.bg_jpg);

       this.addChild(bg);

       bg.setPosition(cc.winSize.width/2,cc.winSize.height/2);

       //创建动画

       var frameUp=[];

       var frameDown=[];

       var frameLeft=[];

       var frameRight=[];

       var texture=cc.textureCache.addImage("res/2.png");

       //添加帧序列

       for(var n=0;n<4;n++)

       {

           var nowframeup=new cc.SpriteFrame(texture,cc.rect(32*n,48*3,32,48));

           var nowframedown=new cc.SpriteFrame(texture,cc.rect(32*n,0,32,48));

           var nowframeleft=new cc.SpriteFrame(texture,cc.rect(32*n,48,32,48));

           var nowframeright=new cc.SpriteFrame(texture,cc.rect(32*n,48*2,32,48));

           frameUp.push(nowframeup);

           frameDown.push(nowframedown);

           frameLeft.push(nowframeleft);

           frameRight.push(nowframeright);

       }

       //创建动画

       var animationUp=new cc.Animation(frameUp,0.2);

       var animationDown=new cc.Animation(frameDown,0.2);

       var animationLeft=new cc.Animation(frameLeft,0.2);

       var animationRight=new cc.Animation(frameRight,0.2);

       //添加到缓存里

       cc.animationCache.addAnimation(animationUp,"up");

       cc.animationCache.addAnimation(animationDown,"down");

       cc.animationCache.addAnimation(animationLeft,"left");

       cc.animationCache.addAnimation(animationRight,"right");

       //创建animate并运行

         this.sprite=new cc.Sprite();

         this.addChild(this.sprite);

         this.sprite.setTag(100);

        this.sprite.runAction(cc.animate(

                    cc.animationCache.getAnimation("up")).repeatForever());

        this.sprite.setScale(4);

        this.sprite.setPosition(200,200);

本节课的作业是实现帧动画上下左右的方向变化，通过触摸位置和动画当前所在位置进行了坐标的判断后，不难实现。

最后附上本节课的作业链接：

http://www.cocoscvp.com/usercode/2016_04_25/6a92644a3d22ba869d86ebe4892b4d023f07c9ad/