动画组件

动画组件Animator用于管理所挂载元素下所有的动画。

和其他组件一样，它也提供了在xml中和脚本控制两种方法。我们先看看脚本控制是怎么做的：

const animator = el.getComponent(xrFrameSystem.Animator);

// 添加一个动画，`clipMap`可选
animator.addAnimation(new XrTeamCameraAnimation(data), clipMap);

// 通过动画类直接创建一个动画，`clipMap`可选
const anim = animator.createAnimation(XrTeamCameraAnimation, data, clipMap);

// 移除一个动画
animator.removeAnimation(anim);

// 播放名为`name`的动画，可以同时播放多个
animator.play(name, options);

// 暂停名为`name`的动画，不填`name`则暂停所有
animator.pause(name);

// 唤醒名为`name`的动画，不填`name`则唤醒所有
animator.resume(name);

// 停止名为`name`的动画，不填`name`则停止所有
animator.stop(name);

// 将名为`name`的片段定格到某个进度
animator.pauseToFrame(name, progress);

这里要特别注意的有几个点：

1. clipMap本质上是给开发者提供了一个从动画组件片段的名字到动画实例片段名字的映射，这一般在动画组件有多个动画实例、而动画实例中的片段有重名的情况下会很有用。如果不填，则会默认使用动画实例的片段名来索引。
2. options是播放时的参数，具体的定义可以参照API文档，要说明的是在play时提供的这个参数，会覆盖掉动画实例onPlay时返回的参数。

相较于脚本控制，大部分开发者在xml中用动画组件会比较常见。所有派生自XRElement元素的元素，都会拥有默认的动画属性映射：

<xr-node
  anim-keyframe="basic-anim"
  anim-clipmap="default:cube"
  anim-autoplay="clip:cube, speed:2"
></xr-node>

这三个属性对应于动画组件的三个数据，最后一个anim-autoplay指定了是否要默认播放以及默认播放的片段和参数，如果不写clip数据则会播放所有的片段。anim-clipmap则是给默认加载的动画指定一个片段映射，而这个默认的动画就是anim-keyframe指定的，它就是前面提到的内置的帧动画，这个可以在后面的章节看到详细说明。

除了anim-keyframe，其他两个参数可以作用于前面提到的gltf动画，也可以在相关章节查看。

事件

动画组件为元素提供了以下事件：