帧动画与spine动画

一.帧动画

原理：帧动画是一组“相关联”图片，在很短的时间内，播放切换，让大脑认为是连续的;

优点: 实现简单播放性能高，播放性能高；

缺点: 资源占用过大;

二.Spine

原理：将一个模型，根据动画的需求分成一些骨骼，一个骨骼对应一张贴图，将这些 骨骼通过工具，在不同的时间点来调整骨骼的位置、缩放、透明度等信息， 将这些时间点连续的播放形成动画;

优点:资源占用少；

缺点: 播放的性能比帧动画差;

spine动画的cocos2dx播放代码：

播放
SkeletonAnimation* node = SkeletonAnimation::createWithFile("JXM.json", "JXM.atlas", 0.5f);
node->setAnimation(0, "in", false); // 设置0好管道的第一个动画,
//当一个个管道中addAnimation了一个循环播放的动画后，再添加新动画是无效了
node->addAnimation(0, "clk_1", true); // 往0号管道后面来添加，用add

//node->setAnimation(1, "clk_1", true);//clk_1也会控制骨骼

this->scheduleOnce([node](float dt) {
	node->clearTrack(0); // 立刻马上停止0号管道的动画
	node->clearTracks(); // 停止所有管道动画
}, 5, "test_stop_anim");
	

this->addChild(node);
node->setPosition(480, 0);

给动画添加事件监听
void setStartListener(const StartListener& listener);
void setInterruptListener(const InterruptListener& listener);
void setEndListener(const EndListener& listener);
void setDisposeListener(const DisposeListener& listener);
void setCompleteListener(const CompleteListener& listener);
void setEventListener(const EventListener& listener);

void setTrackStartListener(spTrackEntry* entry, const StartListener& listener);
void setTrackInterruptListener(spTrackEntry* entry, const InterruptListener& listener);
void setTrackEndListener(spTrackEntry* entry, const EndListener& listener);
void setTrackDisposeListener(spTrackEntry* entry, const DisposeListener& listener);
void setTrackCompleteListener(spTrackEntry* entry, const CompleteListener& listener);
void setTrackEventListener(spTrackEntry* entry, const EventListener& listener);

 

骨骼动画文件:

1.骨骼的图片,（图集）

2.atlas文件，可以叫位置描述文件，描述每个骨骼在图集中的位置和宽高等

3. 动画脚本：骨骼动画时间轴文件: 多个动画分组配置；每个分组有个动画名称

"animations": {
	"animation_1_click": {
		"slots": {
			"bonm_0": {
				"attachment": [
					{ "time": 0, "name": null },
					{ "time": 0.0666, "name": null },
					{ "time": 0.1333, "name": "bonm_0" },
					{ "time": 0.3, "name": "bonm_0" }
				],
				"color": [
					{ "time": 0.3, "color": "ffffff00" }
				]
			},
			"bonm_1": {
				"attachment": [
					{ "time": 0, "name": null },
					{ "time": 0.0666, "name": null },
					{ "time": 0.1333, "name": "bonm_1" },
					{ "time": 0.3, "name": "bonm_1" }
				],
				"color": [
					{ "time": 0.3, "color": "ffffff00" }
				]
			},
    }


}
"bones": {
			"root": {
				"rotate": [
					{ "time": 0.0666, "angle": 0, "curve": "stepped" },
					{ "time": 0.2, "angle": 0, "curve": "stepped" },
					{ "time": 0.2666, "angle": 0 }
				],
				"translate": [
					{ "time": 0.0666, "x": 3.33, "y": 12.3 },
					{ "time": 0.1, "x": 7.42, "y": 7.42, "curve": "stepped" },
					{ "time": 0.2, "x": 7.42, "y": 7.42, "curve": "stepped" },
					{ "time": 0.2666, "x": 7.42, "y": 7.42 }
				],
				"scale": [
					{ "time": 0.0666, "x": 1.04, "y": 1.04, "curve": "stepped" },
					{ "time": 0.1, "x": 0.95, "y": 0.95, "curve": "stepped" },
					{ "time": 0.2, "x": 0.95, "y": 0.95 },
					{ "time": 0.3, "x": 1.3, "y": 1.3 }
				]
			},
			"bone": {
				"rotate": [
					{ "time": 0.0666, "angle": 0, "curve": "stepped" },
					{ "time": 0.2, "angle": 0, "curve": "stepped" },
					{ "time": 0.2666, "angle": 0 }
				],
				"translate": [
					{ "time": 0.0666, "x": 0, "y": 0 },
					{ "time": 0.1333, "x": -40.66, "y": -203.34 },
					{ "time": 0.2, "x": 0, "y": 0, "curve": "stepped" },
					{ "time": 0.2666, "x": 0, "y": 0 }
				],
				"scale": [
					{ "time": 0.0666, "x": 1.04, "y": 1.04, "curve": "stepped" },
					{ "time": 0.1, "x": 1, "y": 1, "curve": "stepped" },
					{ "time": 0.2, "x": 1, "y": 1, "curve": "stepped" },
					{ "time": 0.2666, "x": 1, "y": 1 }
				]
			},