cocos引擎可以支持多种动画,这里挨个介绍一下,做个总结


开发工具: Cocos Studio + VS Code

帧动画

使用方式

  • 使用Cocos Studio

    1. 将多张图片拖进csd文件动画面板的控件中,会弹窗创建序列帧动画,设置起始帧和间隔帧后确定,发布csb资源
    2. 在lua代码中执行动画
      1
      2
      3
      4
      local action = cc.CSLoader:createTimeline("xx.csb")
      node:runAction(action)
      -- 开始帧,结束帧,是否循环
      action:gotoFrameAndPlay(0, 60, true)
  • 直接使用代码创建

    1. 在res文件夹放置多张格式化名称的图片,比如是 anim_1.png,anim_2.pnganim_9.png
    2. cocos调用
      1
      2
      3
      4
      local frames = display.newFrames("anim_%d.png", 1, 9)
      local animation = display.newAnimation(frames, frameTime)
      local sprite = display.newSprite(frames[1])
      :addTo(node)

补间动画

官方文档:Action

cocos2d-x提供了多种动画,缩放、平移、旋转、显示、隐藏等。

使用方式

1
2
-- 一秒转动360度
node:runAction(cc.RotateBy:create(1, 360))

常用的补间动画

  • cc.DelayTime 延时
  • cc.RotateTo cc.RotateBy
  • cc.MoveTo cc.MoveBy
  • cc.Sequence 动画序列
  • cc.CallFunc 在动画序列过程中执行的方法
  • cc.RepeatForever 无限循环动画

示例:

1
2
3
4
5
6
7
8
9
local actions = {}
table.insert(actions, cc.DelayTime:create(1))
table.insert(actions, cc.CallFunc:create(function()
-- do sth
end))
table.insert(actions, cc.RotateBy:create(1, 360))
local sequenceAction = cc.Sequence:create(actions)
local repeatAction = cc.RepeatForever:create(sequenceAction)
node:runActions(repeatAction)

spine骨骼动画

简介

相关介绍:腾讯游戏学院

spine的美术资源一般包含三部分:

  1. atlas
  2. json
  3. png

相关类

  • SkeletonAnimation

使用

1
2
3
4
5
6
local skeAnim = sp.SkeletonAnimation:create("filename.json", "filename.atlas",1)
--设置动画的位置
skeAnim:align(display.CENTER, display.cx, display.cy)
-- 这里的动画名称可以在filename.json的 animations节点中找到
skeAnim:addAnimation(0, 'mj_qghu', false)
self:addChild(skeAnim)

遇到的坑

多次播放动画后留有残影

问题描述

在多次调用setAnimation播放动画时,留有前一个动画的部分部件的残影。

出现原因

前一个动画关键帧关闭了这个部件的显示,影响到了下一个动画。

解决方案

  • 由设计同学重新提供动画资源。
  • setAnimation前,调用setToSetupPose 搜到的解决方案,经测试未解决问题。

不同引擎对旋转的不同处理

此前在做的一个转盘特效里,发现设计同学给出的的资源在代码里播放时,旋转方向相反,且旋转角度超过180度时,旋转角度异常,在查看filename.json文件资源后发现问题:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.1, "angle": 180 },
{ "time": 0.2, "angle": 0 },
{ "time": 0.3333, "angle": 180 },
{
"time": 0.5333,
"angle": 0,
"curve": [ 0.086, 0.09, 0.828, 0.5 ]
},
{
"time": 0.7667,
"angle": 180,
"curve": [ 0.181, 0.24, 0.588, 0.67 ]
},
{
"time": 1.0667,
"angle": 21.32,
"curve": [ 0.34, 0.4, 0.681, 0.75 ]
},
{
"time": 1.3333,
"angle": -83.03,
"curve": [ 0.369, 0.62, 0.712, 1 ]
},
{ "time": 1.6, "angle": -179.17 }
],

在设计同学给出的资源中,rotate节点的angle是相对于前一个旋转角度的变化值,设计同学的动画开发软件会根据最近需要转动的最小角度去转动,所以设计同学看到的的预览是逆时针转动的。

而导入cocos之后,展现出来的效果是 转半圈-返回-转半圈-返回,且反向,因此判定是设计同学的开发软件和cocos2d-xjson文件中rotate的处理不一致。

解决方案

手动改动资源中的旋转角度,改动至旋转重点的角度,写了段lua脚本做转换

1
2
3
4
5
6
7
local origin = {0, 180, 0, 180, 0, 180,21.32, -83.03, -179.17}
local dest = {0}
for i = 2, #origin do
local absValue = math.abs(origin[i] - origin[i - 1])
local value = dest[#dest] - math.min(absValue, 360 - absValue)
table.insert(dest, value)
end

改动后的文件部分如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"rotate": [
{ "time": 0, "angle": 0 },
{ "time": 0.1, "angle": -180 },
{ "time": 0.2, "angle": -360 },
{ "time": 0.3333, "angle": -540 },
{
"time": 0.5333,
"angle": -720,
"curve": [ 0.086, 0.09, 0.828, 0.5 ]
},
{
"time": 0.7667,
"angle": -900,
"curve": [ 0.181, 0.24, 0.588, 0.67 ]
},
{
"time": 1.0667,
"angle": -1058.68,
"curve": [ 0.34, 0.4, 0.681, 0.75 ]
},
{
"time": 1.3333,
"angle": -1163.03,
"curve": [ 0.369, 0.62, 0.712, 1 ]
},
{ "time": 1.6, "angle": -1259.17 }
],

粒子动画

粒子动画只包含单个plist文件

相关资源

使用方式

1
2
local paticle = cc.ParticleSystemQuad:create("filename.plist")
paticle:addTo(self.bgBtn)