Cocos Creator 中 Spine 动画支持倒放吗？如何实现？

Question

Cocos Creator 内置的 Spine 组件（如 `sp.Spine`）**原生不支持动画倒放（reverse playback）**。其 `setAnimation()` 和 `addAnimation()` 接口仅接受正向播放方向，`timeScale` 设为负值时会被强制截断为 0，导致动画停顿而非倒播。这是因 spine-cocos2d 框架底层未实现反向时间采样逻辑，且 SkeletonRenderer 未适配逆序关键帧插值。开发者常误以为设置 `timeScale = -1` 即可倒放，结果动画卡死或异常跳变。该限制在 Cocos Creator 3.x（基于 TypeScript）和 2.x（JavaScript）中均存在，且官方文档未明确警示。若需倒放效果，必须自行扩展：常见方案包括——手动控制 `skeleton.time` 并反向步进 + 调用 `updateWorldTransform()`；或预烘焙倒放动画序列导出为新 Spine 动画；亦可借助 `sp.Skeleton` 的 `state` 对象结合自定义 TrackEntry 时间管理。但所有方案均需绕过组件封装，直接操作底层 Skeleton 实例，对 Spine 运行时 API 熟悉度要求较高。

Answer 1

```html

一、现象层：开发者最常遇到的“timeScale = -1 卡死”问题

在 Cocos Creator 2.x（JavaScript）与 3.x（TypeScript）中，当开发者对 sp.Spine 组件调用 spine.timeScale = -1 时，动画立即停止——而非倒放。控制台无报错，但 skeleton.state.timeScale 被底层强制归零，skeleton.time 停滞，updateWorldTransform() 不再生效。这是表层可复现的第一道门槛。

二、机制层：为何原生 Spine 组件拒绝负向 timeScale？

• Spine 运行时限制：Cocos 封装的 spine-cocos2d（v3.8+ 分支）未实现 Skeleton::update(float delta) 中对 delta < 0 的安全处理逻辑；
• Renderer 短路逻辑：SkeletonRenderer 在每帧仅执行 skeleton.updateWorldTransform()，该函数依赖正向累积时间，不校验或重映射负时间轴；
• State 模块拦截：AnimationState 内部对 TrackEntry.time 做了 clamping：Math.max(0, entry.time)，导致负值被静默丢弃。

三、架构层：Cocos Creator Spine 封装的三层抽象失配

抽象层级	职责	倒放支持现状
sp.Spine 组件	提供 UI 层 API（setAnimation/addAnimation）	❌ 无 reverse 参数，timeScale 被截断
sp.Skeleton 实例	封装 spine-core 的 Skeleton 与 AnimationState	⚠️ 底层支持负 delta（需手动调用），但 Cocos 未暴露接口
spine-core C++/TS 运行时	提供 Skeleton.update(), AnimationState.apply() 等原子能力	✅ 支持反向采样（需传入负 delta 并管理 TrackEntry.time）

四、实践层：三种可行倒放方案对比与选型建议

1. 手动时间步进法：绕过 AnimationState，直接操作 skeleton.time 并反向递减，每帧调用 skeleton.updateWorldTransform()；优点是轻量、实时可控；缺点是丢失混合、事件、IK 解算等高级状态。
2. 预烘焙动画法：在 Spine 编辑器中将原动画导出为新动画（如 run_reverse），通过 setAnimation("run_reverse", true) 正向播放；优点是兼容性最佳、支持所有 Spine 特性；缺点是资源翻倍、无法动态反转任意动画。
3. TrackEntry 时间劫持法：获取 skeleton.state.getCurrent(0) 返回的 TrackEntry，重写其 time 和 lastTime 字段，并在 onUpdate 生命周期中注入负向 delta；需 patch AnimationState.apply() 执行时机，技术门槛最高但功能最完整。

五、代码层：TrackEntry 时间劫持法核心实现（Cocos Creator 3.8+ TypeScript）

const entry = spine.skeleton.state.getCurrent(0);
if (entry) {
  // 关键：禁用自动 time 更新，接管控制权
  entry.trackTime = 0;
  entry.animationLast = entry.animationEnd; // 倒放起点设为动画末尾
  entry.animationTime = entry.animationEnd;

  // 自定义 update hook（需挂载到 Component.update）
  this._reverseUpdate = () => {
    const delta = -this.node.getScene().getPhysicsManager().getFixedTimeStep();
    entry.animationTime += delta;
    if (entry.animationTime < entry.animationStart) {
      entry.animationTime = entry.animationStart;
      spine.skeleton.state.clearTracks(); // 可选：播放完毕后清空
    }
    spine.skeleton.updateWorldTransform();
  };
}

六、演进层：社区补丁与未来适配路径

graph LR
A[官方未支持 reverse] --> B[社区 PR #1245]
B --> C{Cocos Creator 4.x?}
C -->|已合入实验分支| D[新增 setAnimation(name, loop, reverse: boolean)]
C -->|暂未发布| E[需自行 patch spine-cocos2d/src/SkeletonRenderer.ts]
E --> F[重写 update 方法，注入 delta 符号判断逻辑]

七、避坑层：高频错误模式与调试技巧

• ❌ 在 setAnimation() 后立即设 timeScale = -1 → 实际触发的是 state.clearTracks() 清除行为；
• ❌ 使用 skeleton.findAnimation() 获取动画后直接 apply() → 缺少 state.apply() 上下文，骨骼不更新；
• ✅ 调试建议：监听 skeleton.state.addListener() 的 start/end 事件，打印 entry.time 与 entry.trackTime 变化轨迹；
• ✅ 验证倒放精度：导出动画 JSON，检查 animations[x].timelines[].frames 是否含足够密集关键帧（否则倒放易跳变）。

```