跳到主要内容

动画

PlayCanvas 通过播放动画片段驱动实体层级。片段是一组按时间排列、作用于具名节点属性的关键帧，例如角色骨骼、机械部件或灯光颜色等组件属性。anim 组件在所属实体下的层级播放片段，本节其他功能均建立于此。

GLB 动画

加载上方霸王龙后，可以拖动环绕观察。它来自 Web Components 示例，动画只需在 <pc-model> 内添加一个空 <pc-anim>。未声明片段时，会循环播放模型自己的动画。各开发方式对比了相同功能的用法。

动画如何工作​

  • **片段**通常随模型导入。GLB 或编辑器导入的 FBX 可包含动画，也能通过代码从关键帧创建。片段按节点名称绑定，因此可以用于节点名称一致的不同模型。
  • anim 组件在实体下方层级播放片段。各片段放在一个状态中，切换时可交叉淡化。
  • 状态图决定播放状态，包括状态、过渡和过渡检查的参数，例如 speed 或 jump 触发器。代码设置参数，状态图负责切换。
  • **混合树**根据参数在同一状态中混合多个片段，例如从行走平滑变化到奔跑。
  • **图层和遮罩**在同一模型上同时运行多个状态图，并限制作用节点，例如边走边挥手。
  • **事件**在片段指定时间触发脚步音效、特效或玩法逻辑。

各开发方式​

anim 组件本身一致，但各开发方式提供的界面和声明能力不同。未提供对应标记或 UI 的功能，可通过代码访问引擎组件。

引擎编辑器ReactWeb Components
播放模型片段entity.anim.assignAnimation()Anim 组件和状态图资源<Anim playing /><pc-anim>
交叉淡化切换片段layer.transition()状态图过渡引擎 APIclip 和 transition-time 特性
状态图与参数entity.anim.loadStateGraph()Anim State Graph 资源编辑器引擎 API引擎 API
混合树状态图数据仅脚本引擎 API引擎 API
图层与遮罩entity.anim.addLayer()图层在状态图中，遮罩在 Anim 组件中引擎 API引擎 API
事件片段上的 new pc.AnimEvents()动画资源中的事件引擎 API引擎 API
备注

anim 取代了不支持状态图的旧 animation 组件。旧组件仍可工作，但新项目应使用 anim。Spine 2D 骨骼动画见 Spine。

本节内容​

  • 播放动画：添加组件、播放与切换、速度、暂停、循环及完成检测。
  • 动画片段：GLB/FBX 动画、节点绑定和代码创建片段。
  • 状态图：状态、过渡、参数和条件，支持编辑器和代码创建。
  • 混合树：按一维、二维参数或独立权重混合片段。
  • 图层与遮罩：同时播放多个状态图、混合并限制模型部位。
  • 动画事件：在指定时间触发和处理事件。

另请参阅​