動畫動畫

屬性

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

屬性 描述 預設值
attribute 動畫的屬性。要指定元件屬性,請使用 componentName.property 語法(例如,light.intensity)。 rotation
begin 在開始動畫之前要等待的事件名稱。 ""
delay 在開始動畫之前等待的延遲(以毫秒為單位)或事件名稱。 0
direction 動畫的方向(fromto 之間)。alternatealternateReversenormalreverse 之一。 normal
dur 動畫的持續時間(毫秒)。 1000
easing 緩動動畫的功能。有很多可供選擇。 ease
end 在停止動畫之前要等待的事件名稱。 ""
fill 確定動畫在不主動播放時的效果。backwardsbothforwardsnone 之一。 forwards
from 起始值。 Current Value
repeat 重複計數或 indefinite 0
to 結束值。必須指定。 None

開始

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 屬性定義在起始值和最終值之間設定動畫的方式。

當我們定義一個交替方向時,動畫將在 fromto 值之間來回傳遞,就像溜溜球一樣。交替方向僅在重複動畫時生效。

描述
alternate 在偶數週期,從 fromto 的動畫。在奇數週期,動畫從 tofrom
alternate-reverse 在奇數週期上,從 fromto 的動畫。在偶數週期,動畫從 tofrom
normal fromto 的動畫。
reverse 動畫從 tofrom

緩解

easing 屬性定義動畫的緩動功能,預設為 ease。要列出的緩動函式太多,但我們可以隱式解釋它們。

一個可能的價值是 linear。基本的寬鬆功能是 easeease-inease-outease-in-out

然後有更多的緩和功能組。上述基本緩動函式為每組緩動函式新增字首。緩和功能組是 cubicquadquartquintsineexpocircelasticbackbounce

例如,cubic 組的緩和功能包括 ease-cubicease-in-cubicease-out-cubicease-in-out-cubic

fill 屬性定義動畫在不主動播放時的效果。將 fill 視為每個動畫週期之前和/或之後動畫在實體上設定的值。以下是 fill 的可能值及其影響。

描述
backwards 在動畫開始之前,將起始值設定為 from 值。
both 結合向後填充和向前填充的效果。
forwards 動畫結束後,最終值將保持在 to 值。預設填充。
none 在動畫開始之前,將起始值設定為初始值。動畫結束後,將值重置為初始值。

重複

repeat 屬性定義動畫重複的頻率。我們稱動畫的每個重複都是一個迴圈。重複可以是在每個動畫週期倒計時的數字,直到它到達 0,此時動畫將結束,或者我們可以將 repeat 設定為 indefinite 並且動畫將連續迴圈直到動畫被手動移除或停止。

活動

<a-animation> 元素髮出了幾個事件。

活動名稱 描述
animationend 動畫結束時發出。在重複的情況下,當重複計數達到 0 時發出。沒有無限重複發出。
animationstart 動畫開始播放時立即發出。