动画动画

属性

以下是动画属性的概述。我们将在下面详细介绍。

开始

begin 属性定义动画何时开始播放。

这可以是一个数字，表示等待的毫秒数，也可以是要等待的事件名称。例如，我们可以定义在缩放实体之前等待 2 秒的动画。

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

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

<a-entity id="fading-cube" 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 属性定义在起始值和最终值之间设置动画的方式。

当我们定义一个交替方向时，动画将在 from 和 to 值之间来回传递，就像溜溜球一样。交替方向仅在重复动画时生效。

缓解

easing 属性定义动画的缓动功能，默认为 ease。要列出的缓动函数太多，但我们可以隐式解释它们。

一个可能的价值是 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 的可能值及其影响。

重复

repeat 属性定义动画重复的频率。我们称动画的每个重复都是一个循环。重复可以是在每个动画周期倒计时的数字，直到它到达 0，此时动画将结束，或者我们可以将 repeat 设置为 indefinite 并且动画将连续循环直到动画被手动移除或停止。

活动

<a-animation> 元素发出了几个事件。