更新于 

Animation 动画系统 && Action 动作系统

动画系统

Animation

动画系统

动画一般分为2种：

  • 关键帧动画
    • 自动计算2帧之间的中间数值
  • 序列帧动画
    • 每帧都有不同的SpriteFrame
    • 快速翻动帧，产生帧动画
AnimationClip

要控制某个节点的动画，需要为组件添加Animation动画控制器组件，
Animation组件中需要添加AnimationClip作为操作动画的源文件，

AnimationClip文件需要再动画编辑器中进行编辑：
按帧修改动画节点的属性，作为关键帧。

AnimationClip编辑器

包含以下属性：

  • 取样率 Sample
    • 影响可设置帧的最小精度单位
  • 播放速度 Speed
  • 循环模式 WrapMode
    • 可以设置循环播放、正放倒放交替等等模式
  • 时间曲线
    • 双击编辑动画速率函数
  • 帧事件
    • 支持添加帧事件，事件名和参数都可定制
    • 会从添加到组件中的脚本内找到与定义的帧事件同名的方法
脚本控制动画播放

脚本控制动画文档

  • 播放动画 play

    • 可选参数1：动画名
    • 可选参数2：开始时间
      1
      anim.play('test', 1)

  • 暂停 pause

  • 恢复 resume

  • 停止 stop

  • 设置动画的当前时间 setCurrentTime

动画事件回调
  • play 开始动画
  • stop 停止动画
  • pause 暂停动画
  • resume 恢复动画
  • lastframe 存在循环的动画播放到最后一帧时
  • finished 动画播放结束

事件回调的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var animation = this.node.getComponent(cc.Animation);

// 注册
animation.on('play',      this.onPlay,        this);
animation.on('stop',      this.onStop,        this);
animation.on('lastframe', this.onLastFrame,   this);
animation.on('finished',  this.onFinished,    this);
animation.on('pause',     this.onPause,       this);
animation.on('resume',    this.onResume,      this);

// 取消注册
animation.off('play',      this.onPlay,        this);
animation.off('stop',      this.onStop,        this);
animation.off('lastframe', this.onLastFrame,   this);
animation.off('finished',  this.onFinished,    this);
animation.off('pause',     this.onPause,       this);
animation.off('resume',    this.onResume,      this);

动作系统

Action

动作系统官方文档

cc.Node存在以下支持进行动作的API：

  • runAction 执行动作
    • 参数action：cc.Action，指定执行的动作
  • stopAction 停止指定动作
    • 参数action：cc.Action，指定执行的动作
  • stopAllActions 停止所有动作

cc.Action动作类型可以通过设置tag来完成set/get/run/stop等一系列操作：

1
2
3
action.setTag(0)
this.node.getActionByTag(0)
this.node.stopActionByTag(0)
Action API

Action API

cocos中动作系统主要分为以下几类

  • 容器动作
    • 用于组织单个或多个动作的执行顺序、次数、速度
  • 即时动作
    • 无关执行时间、瞬间实现的动作
  • 时间间隔动作/基础动作
    • 从开始执行到结束执行之间，存在一系列中间值计算的动作
  • 缓动动作
    • 时间间隔动作的附属属性，操作一系列中间值与时间变化的方式

  • sequence 顺序执行动作

    1
    2
    let seq1 = cc.sequence(act1, act2)
    let seq2 = cc.sequence(actArray)

  • repeat 重复指定次数的某个动作

    1
    let rep = cc.repeat(cc.sequence(jump2, jump1), 5)

  • repeatForever 永远重复一个动作

    1
    let repeat = cc.repeatForever(act)

  • spawn 并行执行多个任务

    1
    2
    3
    4
    let action = cc.spawn(
        cc.jumpBy(2, cc.v2(300, 0), 50, 4),
        cc.rotateBy(2, 720)
    )

  • speed 速率

    1
    2
    let action = cc.scaleTo(0.2, 1, 0.6)
    let newAction = cc.speed(action, 0.5)

  • show 立即显示

    1
    let action = cc.show()

  • hide 立即隐藏

    1
    let action = cc.hide()

  • toggleVisibility 显隐状态切换

    1
    var action = cc.toggleVisibility();

  • removeSelf 从父节点移除自身

    1
    var action = cc.removeSelf()

  • flipX X轴翻转

    1
    var action = cc.flipX(true)

  • flipY Y轴翻转

    1
    var action = cc.flipY(true)

  • place 放置在目标位置

    1
    let action = cc.place(cc.v2(200, 200))

  • callFunc 执行回调函数

    1
    2
    3
    4
    // 参数1：回调函数
    // 参数2：回调目标
    // 参数3：传递参数
    var finish = cc.callFunc(this.callbackFunc, this.target,  true);

  • moveTo 移动到目标位置

  • moveBy 移动指定的距离

  • rotateTo 旋转到目标角度

  • rotateBy 旋转指定的角度

  • scaleTo 缩放到指定倍数

  • scaleBy 按指定倍数缩放节点

  • skewTo 偏移到目标角度

  • skewBy 偏移指定的角度

  • jumpBy 跳跃指定距离

  • jumpTo 用跳跃的方式移动到目标位置

  • follow 追踪目标节点位置

  • bezierTo 按照贝塞尔曲线轨迹移动到目标位置

  • bezierBy 按照贝塞尔曲线轨迹移动指定距离

  • blink 闪烁（基于透明度）

  • fadeTo 渐隐（给予透明度）

  • fadeIn 渐显

  • fadeOut 渐隐

  • tintTo 修改颜色到指定值

  • tintBy 按照制定增量修改颜色

  • delayTime 延迟指定的时间量

  • reverseTime 反转目标动作时间轴

运动函数，详情参考 官方文档

cocos的文档里竟然还有知乎页面的引用
跳转到的知乎页面还都是吐槽cocos文档的评论，
双向奔赴了这属于…

2.4版本后，引入的缓动系统，
使用cc.Tween代替了cc.Action动作系统，
cc.Tween采用的是链式创建，比cc.Action要简洁得多