0
点赞
收藏
分享

微信扫一扫

帧动画与spine动画

眸晓 2022-04-26 阅读 174
cocos2d

一.帧动画

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

优点: 实现简单播放性能高,播放性能高;

缺点: 资源占用过大;

二.Spine

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

优点:资源占用少;

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

spine动画的cocos2dx播放代码:

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


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

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

骨骼动画文件:

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 }
				]
			},

举报

相关推荐

0 条评论