一、先谈思路：

监听四个技能按钮，当某一个按钮有按下操作，执行相应的动画。下面将详细介绍三种不同的方法实现技能动画。

技能一：

打开Cocostudio中的Animationeditor,制作动画。

步骤如下：

新建项目->导入文件->将所有文件拖到编辑器中间->切换形体模式到动画模式->在动画帧中设置如下

第0-5帧，只显示Layer1，其他layer都隐藏

第5-10帧，只显示Layer2，其他layer都隐藏

第6-15帧，只显示layer3,其他layer都隐藏

......

第40-45帧，只显示layer8,其他layer都隐藏

添加帧：

隐藏帧：（隐藏帧为红色）

最终设置如下：

点击播放动画，有没有激动一把呢^_^

Ctrl+s:保存

Ctrl+e:导出

生成文件：

代码如下：

void HelloWorld::skill1()
{
	/* 获取窗口大小 */
	Size visibleSize = Director::geTinstance()->getVisibleSize();
	/* 向骨骼管理器添加文件 */
	ArmatureDataManager::geTinstance()->addArmatureFileInfo("skillboom.ExportJson");
	/* 创建骨骼 */
	Armature* armature = Armature::create("skillboom");
	/* 运行动画 */
	armature->getAnimation()->play("Animation1");
	armature->setPosition(Point(visibleSize.width / 2,visibleSize.height / 2 - 50));
	this->addChild(armaturE);
}

技能二:

将16张图片，当作帧，连续显示形成动画。

void HelloWorld::skill2()
{
	Size visibleSize = Director::geTinstance()->getVisibleSize();

	/* 创建精灵 */
	player2 = CCSprite::create("skilltwo (16).png");
	player2->setPosition(Point(visibleSize.width / 2,visibleSize.height / 2 - 50));
	this->addChild(player2,1);
	
	/* 创建动画容器 */
	CCAnimation *animation = CCAnimation::create();
	for (int i = 1; i <= 16; i++)
	{
		/* 将每一图片帧添加到动画容器 */
		char szImageFilename[128] = { 0 };
		sprintf(szImageFilename,"skilltwo (%02d).png",i);
		animation->addSpriteFrameWithFilename(szImageFileName);	
	}
	animation->setDelayPerUnit(0.1f); // 每帧0.1s  
	animation->setRestoreOriginalFrame@R_197_6334@; // 帧播放完之后返回到第一帧  

	/* 创建动画动作 */
	CCAnimate *action = CCAnimate::create(animation);

	/* 创建函数动作 */
	auto callFunc = CallFunc::create([&](){
		player2->removeFromParent();
	});

	/* 顺序执行动作，确保动画执行完后，将精灵移除 */
	auto sequence = Sequence::create(action,callFunc,null);

	player2->runAction(sequencE);  // 运行精灵对象
}

技能三：

在技能二的基础上进行优化，将多张图片用软件TexturePacker打包成一张图，优化了内存。因为cocos里图片占用的空间是以2的n次方计算的，打包在一起，占用空间总体来说要少些，且只需加载一次。

void HelloWorld::skill3()
{
	Size visibleSize = Director::geTinstance()->getVisibleSize();

	player3 = CCSprite::create("skillthree.png");
	player3->setPosition(Point(visibleSize.width / 2,visibleSize.height / 2 - 50));
	this->addChild(player3,1);

	/* 将图片加载到帧缓存池 */
	SpriteFrameCache* frameCache = SpriteFrameCache::geTinstance();
	frameCache->addSpriteFramesWithFile("attack.plist","attack.png");

	/* 用小图片的名字取出图片，添加到容器里 */
	Vector<SpriteFrame*> allFrame;
	for (int i = 5; i < 11; i++)
	{
		char nameTmp[256] = { 0 };
		sprintf(nameTmp,"Frame%d.png",i);
		SpriteFrame* sf = frameCache->spriteFrameByName(nameTmp);
		allFrame.pushBACk(sf);
	}

	/* 用容器里的帧创建动画对象 */
	CCAnimation* animation = CCAnimation::createWithSpriteFrames(allFramE);
	animation->setDelayPerUnit(0.1f);	//0.1秒1帧

	/* 创建动画动作 */
	CCAnimate* act = CCAnimate::create(animation);

	/* 创建函数动作 */
	auto callFunc = CallFunc::create([&](){
		player3->removeFromParent();
	});

	/* 顺序执行动作，确保动画执行完后，将精灵移除 */
	auto sequence = Sequence::create(act,null);

	player3->runAction(sequencE); // 运行精灵对象
}