coco2d-x 2.0.4 帧动画 两种实现方式

柒哥原创 ，欢迎转载，转载请在明显处注明！ 谢谢。

原文地址：点击打开链接

//第一种方法：

	//屏幕大小
        CCSize s = CCDirector::sharedDirector()->getWinSize();
    
        //把long.png加载到缓存中
        CCSpriteFrameCache *longFrameCache = CCSpriteFrameCache::sharedSpriteFrameCache();
        longFrameCache->addSpriteFramesWithFile("long.","long.png");

        //从缓存中获取每一帧，每一帧的名字从下面的long.plist文件中可以找到
	CCSpriteFrame *longFrame0 = longFrameCache->spriteFrameByName("longsprite1.png");
	CCSpriteFrame *longFrame1 = longFrameCache->spriteFrameByName("longsprite2.png");
	CCSpriteFrame *longFrame2 = longFrameCache->spriteFrameByName("longsprite3.png");
	CCSpriteFrame *longFrame3 = longFrameCache->spriteFrameByName("longsprite4.png");
	CCSpriteFrame *longFrame4 = longFrameCache->spriteFrameByName("longsprite5.png");
	CCSpriteFrame *longFrame5 = longFrameCache->spriteFrameByName("longsprite6.png");

        //4.2中CCMutableArray是未定义的，用CCArray一样的
	CCArray *longAnimFrames = CCArray::createWithCapacity(6);
	longAnimFrames->addObject(longFrame0);
	longAnimFrames->addObject(longFrame1);
	longAnimFrames->addObject(longFrame2);
	longAnimFrames->addObject(longFrame3);
	longAnimFrames->addObject(longFrame4);
	longAnimFrames->addObject(longFrame5);

	//必须创建一个精灵，这里用longFrame0作为精灵的原始图像
        CCSprite* sprite = CCSprite::createWithSpriteFrame(longFrame0);
        sprite->setPosition( ccp( s.width/2-80, s.height/2) );
        addChild(sprite);
 
         //创建动画
	CCAnimation *animation = CCAnimation::createWithSpriteFrames(longAnimFrames, 0.2f);
        longAnimFrames->release();//动画创建完后，把缓存中的帧释放
        CCAnimate *animate = CCAnimate::create(animation);
  
         //OK,让精灵走一会
	sprite->runAction(CCRepeatForever::create(animate));

//第二种方法：
       //屏幕大小
       CCSize s = CCDirector::sharedDirector()->getWinSize();
       //把long.png加载到缓存中
       CCTexture2D *texture = CCTextureCache::sharedTextureCache()->addImage("dragon_animation.png");
    
     //从缓存中获取每一帧
    CCSpriteFrame *frame0 = CCSpriteFrame::createWithTexture(texture, CCRectMake(132*0, 132*0, 132, 132));
    CCSpriteFrame *frame1 = CCSpriteFrame::createWithTexture(texture, CCRectMake(132*1, 132*0, 132, 132));
    CCSpriteFrame *frame2 = CCSpriteFrame::createWithTexture(texture, CCRectMake(132*2, 132*0, 132, 132));
    CCSpriteFrame *frame3 = CCSpriteFrame::createWithTexture(texture, CCRectMake(132*3, 132*0, 132, 132));
    CCSpriteFrame *frame4 = CCSpriteFrame::createWithTexture(texture, CCRectMake(132*0, 132*1, 132, 132));
    CCSpriteFrame *frame5 = CCSpriteFrame::createWithTexture(texture, CCRectMake(132*1, 132*1, 132, 132));
    
    //必须创建一个精灵，这里用longFrame0作为精灵的原始图像
    CCSprite* sprite = CCSprite::createWithSpriteFrame(frame0);
    sprite->setPosition( ccp( s.width/2-80, s.height/2) );
    addChild(sprite);

     //4.2中CCMutableArray是未定义的，用CCArray一样的
    CCArray* animFrames = CCArray::createWithCapacity(6);
    animFrames->addObject(frame0);
    animFrames->addObject(frame1);
    animFrames->addObject(frame2);
    animFrames->addObject(frame3);
    animFrames->addObject(frame4);
    animFrames->addObject(frame5);

     //创建动画
    CCAnimation *animation = CCAnimation::createWithSpriteFrames(animFrames, 0.2f);
    animFrames->release();
    CCAnimate *animate = CCAnimate::create(animation);

     //创建一种翻转的效果
    CCActionInterval* seq = (CCActionInterval*)(CCSequence::create( animate,
                       CCFlipX::create(true),
                       animate->copy()->autorelease(),
                       CCFlipX::create(false),
                       NULL) );
    //走起
    sprite->runAction(CCRepeatForever::create( seq ) );
    

两种方法区别不大，都很容易实现。

用到的图片资源：

方法一的

long.png

long.plist 文件内容如下：

    
        frames
        
            longsprite1.png
            
                frame
                {{123,76},{119,72}}
                offset
                {0,0}
                rotated
                
                sourceColorRect
                {{0,0},{119,72}}
                sourceSize
                {119,72}
            
            longsprite2.png
            
                frame
                {{2,76},{119,72}}
                offset
                {0,0}
                rotated
                
                sourceColorRect
                {{0,0},{119,72}}
                sourceSize
                {119,72}
            
            longsprite3.png
            
                frame
                {{123,2},{119,72}}
                offset
                {0,0}
                rotated
                
                sourceColorRect
                {{0,0},{119,72}}
                sourceSize
                {119,72}
            
            longsprite4.png
            
                frame
                {{2,2},{119,72}}
                offset
                {0,0}
                rotated
                
                sourceColorRect
                {{0,0},{119,72}}
                sourceSize
                {119,72}
            
            longsprite5.png
            
                frame
                {{123,150},{119,72}}
                offset
                {0,0}
                rotated
                
                sourceColorRect
                {{0,0},{119,72}}
                sourceSize
                {119,72}
            
            longsprite6.png
            
                frame
                {{2,150},{119,72}}
                offset
                {0,0}
                rotated
                
                sourceColorRect
                {{0,0},{119,72}}
                sourceSize
                {119,72}
            
        
        metadata
        
            format
            2
            realTextureFileName
            long.png
            size
            {256,256}
            smartupdate
            $TexturePacker:SmartUpdate:75ebb5e9193e585b4725cae12b723150$
            textureFileName
            long.png
        
    

方法二的

dragon_animation.png