动画（Animations）

参考阅读： aframe-animation-component

在A-Frame中，我们可以通过给实体添加一个<a-animation>子元素来实现动画：

作为一个入门例子，我们来定义一个沿Y轴旋转的轨道运行例子：

<a-entity>  <a-entity position="5 0 0"></a-entity>  <a-animation attribute="rotation"               dur="10000"               fill="forwards"               to="0 360 0"               repeat="indefinite"></a-animation></a-entity>

A-Frame动画在线演示（轨道旋转）

属性（Attributes）

下面是动画属性的概述：

给不同类型的属性添加动画

A-Frame的动画系统可以给不同类型的属性添加动画。

vec3属性

A-Frame拥有标准的三维向量vec3组件（也就是，position, rotation, and scale）。这些组件三个分量组成：X, Y, 和Z。我们可以传递三个以空格分开的数字给from和to属性，就像在实体上定义的那样。这种情况下，动画系统将假设我们在对一个vec3的值进行动画处理。

比如，如果我们想给一个实体添加动画，从一点移动到另外一点，我们可以使用position组件。

<a-entity>  <a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation></a-entity>

布尔值（Boolean）属性

A-Frame有一个接受布尔值的标准组件。所谓布尔值的“动画”就是在每个动画周期倒置布尔值（0和1互换）。

例如，我们可以定义一个动画，5秒后切换实体是否可见。

<a-entity>  <a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation></a-entity>

数字（Numeric）属性

我们也可以给数字属性添加动画特性。例如，我们可以改变光照强度。

<a-light intensity="1">  <a-animation attribute="intensity" to="3"></a-animation></a-light>

颜色（Color）属性

我们可以对具有颜色类型的任何组件属性进行动画处理。例如，我们可以把盒子从白色变成红色。

<a-entity geometry="primitive: box">  <a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation></a-entity>

组件属性

我们可以激活多属性组件的某个属性。我们使用点语法来选择组件属性： componentName.propertyName.

例如，为了使圆锥体的顶部半径变大，我们可以通过geometry.radiusTop来选择radiusTop值。

<a-entity geometry="primitive: cone; radiusTop: 1">  <a-animation attribute="geometry.radiusTop" to="0.5"></a-animation></a-entity>

起始（Begin）

begin属性定义动画什么时候开始启动。

这可以是一个代表等待毫秒数的数字（number），或者是一个要等待的事件名称。例如，我们可以定义一个实体缩放前等待2秒的动画。

<a-entity>  <a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation></a-entity>

或者，我们可以定义一个动画，在实体淡出前等待父元素触发名为fade的事件。

<a-entity geometry="primitive: box" material="opacity: 1">  <a-animation attribute="material.opacity" begin="fade" to="0"></a-animation></a-entity>

// Trigger an event to begin fading.document.querySelector('#fading-cube'）。emit('fade');

方向（Direction）

direction属性定义起始点之间的动画方向（比如是从起点到终点还是反之）。

当我们定义一个交替方向时，动画就会像溜溜球一样的在from和to取值之间来回移动。交替方向仅当我们重复动画时才有作用。

缓动（Easing）

easing属性定义了动画的缓动函数。默认为ease。和CSS3动画类似，有很多缓动函数可以使用。

比如linear表示线性过渡。基础的缓动函数为ease，ease-in, ease-out，和ease-in-out。

然后还有更多的缓动函数组。上述基本缓动函数可以作为每个缓动函数组的前缀。缓动函数组包括：cubic, quad, quart, quint, sine, expo, circ, elastic, back，和bounce.

例如，cubic缓动功能组包括： ease-cubic, ease-in-cubic, ease-out-cubic, ease-in-out-cubic.

填充（Fill）

fill属性定义动画未激活时的效果。我们可以把fill当作在每个动画循环之前或之后在实体上所设置的值。下面是fill的一些可能的取值和效果：

重复（Repeat）

repeat属性定义动画的重复次数。Repeat可以是一个数字，每次动画循环减一直到0，此时动画结束，或者我们可以设置repeat为indefinite，这样动画将一直持续直到动画被手动删除或停止。

事件（Events）

<a-animation>元素会发射一些事件：