動畫動畫

屬性

以下是動畫屬性的概述。我們將在下面詳細介紹。

開始

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> 元素髮出了幾個事件。