<pc-anim-clip>
<pc-anim-clip> 在 <pc-anim> 上声明单段命名动画，多个片段可组成 idle、run、jump 等动作库。
- 必须直接位于
<pc-anim>下。 - name 必填，同组件内唯一，不能包含点号。
轨道来源
name 同时是播放名称和来源内查找的轨道名称。来源可以是所属模型或指定资源：
所属模型。 没有 asset 时，取父 pc-anim 直接所在 <pc-model> 的容器。这适合 GLB 自带多段动画，各自声明为片段：
<pc-model name="hero" asset="hero-glb">
<pc-anim>
<pc-anim-clip name="idle"></pc-anim-clip>
<pc-anim-clip name="run"></pc-anim-clip>
</pc-anim>
</pc-model>
指定资源。 asset 指向 <pc-asset>，可将共享动画库应用到未包含动画的模型。支持 container GLB、animation GLB 和 animclip JSON。后两种需显式设 type="animation" 或 type="animclip"，否则 GLB 默认为容器，JSON 为普通 JSON。
<pc-asset id="hero-glb" type="container" src="hero.glb"></pc-asset>
<pc-asset id="wave" type="container" src="clips/wave.glb"></pc-asset>
<pc-model name="hero" asset="hero-glb">
<pc-anim>
<pc-anim-clip name="idle"></pc-anim-clip>
<pc-anim-clip name="wave" asset="wave"></pc-anim-clip>
</pc-anim>
</pc-model>
两种来源可混用，没有 asset 的取模型，有 asset 的取指定文件。
无论来源如何，轨道按以下规则选择：
- 只有一个轨道时，无论实际名称都使用它，因此单片段 GLB 可以任意命名，不必知道导出器名称。
- 多个轨道时，按 name 匹配，失败则回退第一个，并警告可用名称。
轨道按节点名称绑定，因此独立文件和模型的节点名必须一致，详见轨道绑定。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
asset | 资源 ID | - | 提供轨道的 <pc-asset>，支持 container、animation GLB 或 animclip JSON。留空取所属 <pc-model> |
loop | Boolean（布尔） | "true" | 是否循环，非循环在结束时保留最后姿态 |
name | String（字符串） | - | 播放名及来源轨道查找名，同组件内唯一，不含点号 |
speed | Number（数字） | "1" | 片段速度，负值倒放 |
属性实时生效。speed 与 loop 立即更新并保留播放位置；asset 或 name 会重新解析轨道，原组件 clip 名称可能不再匹配。组件自身 speed 会再乘到此值。
加载
轨道解析并分配后元素就绪。等待期间父组件使用空轨道占位，不阻塞场景；activate 和 clip 选择可先应用，资源到达后才出现实际运动。
无法解析时会警告并保持等待，其余动画仍可播放。原因包括资源缺失、加载失败、类型错误或无可用轨道。模型自身加载失败时不会重复警告，因为 pc-model 已报告。
示例
同一单轨行走动画声明为 walk 和慢速倒放 sneak，片段无需知道 GLB 内名称。可改为正 speed，或设 loop="false"，观察停在最终姿态：
<pc-app>
<pc-asset src="https://cdn.jsdelivr.net/npm/[email protected]/scripts/esm/camera-controls.mjs"></pc-asset>
<pc-asset src="https://developer.playcanvas.com/assets/t-rex.glb" id="t-rex"></pc-asset>
<pc-material id="floor" diffuse="#3a3f4b"></pc-material>
<pc-scene>
<pc-entity name="camera" position="2.5 1.5 3.5">
<pc-camera clear-color="#2a2d36"></pc-camera>
<pc-script>
<pc-script-instance name="cameraControls" focus-point="0 1.2 0" pitch-range="-90 0" zoom-range="1.5 10"></pc-script-instance>
</pc-script>
</pc-entity>
<pc-entity name="light" rotation="45 30 0">
<pc-light cast-shadows normal-offset-bias="0.05" shadow-bias="0.2" shadow-distance="20" intensity="1.5"></pc-light>
</pc-entity>
<pc-entity name="ground" scale="30 30 30">
<pc-render type="plane" material="floor"></pc-render>
</pc-entity>
<pc-model name="t-rex" asset="t-rex" scale="1.5 1.5 1.5">
<pc-anim id="anim" clip="walk" transition-time="0.4">
<pc-anim-clip name="walk"></pc-anim-clip>
<!-- A negative speed plays the same track backwards -->
<pc-anim-clip name="sneak" speed="-0.4"></pc-anim-clip>
</pc-anim>
</pc-model>
</pc-scene>
</pc-app>
<div class="controls">
<button id="walk">Walk</button>
<button id="sneak">Sneak backwards</button>
</div>
<style>
.controls {
position: absolute;
top: 12px;
left: 12px;
display: flex;
gap: 8px;
}
</style>
<script type="module">
const anim = document.getElementById('anim');
document.getElementById('walk').onclick = () => anim.setAttribute('clip', 'walk');
document.getElementById('sneak').onclick = () => anim.setAttribute('clip', 'sneak');
</script>
JavaScript 接口
可以通过 AnimClipElement API创建和操作元素。
asset、loop、name 和 speed 均有对应 property。等待 ready() 可保证轨道已分配，父组件层已填充：
import { whenReady } from '@playcanvas/web-components';
const clip = await whenReady('pc-anim-clip');
clip.speed = 2;
运行时可添加或移除片段，组件会重建动作库。移除模型内最后一个显式片段后，恢复使用模型自带动画。重建后仍存在的活动片段会从原位置继续。
const clip = document.createElement('pc-anim-clip');
clip.setAttribute('name', 'wave');
clip.setAttribute('asset', 'wave-glb');
document.querySelector('pc-anim').appendChild(clip);
await clip.ready();
document.querySelector('pc-anim').transition('wave');
另请参阅
<pc-anim>：所属动画组件。<pc-asset>：轨道来源资源。