動畫不同型別的屬性

A-Frame 的動畫系統可以為不同型別的屬性設定動畫。

vec3 屬性

A-Frame 具有標準的 vec3 元件（即 position，rotation 和 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>

布林屬性

A-Frame 具有接受單個布林值的標準元件。布林值也可以通過在每個動畫週期結束時翻轉布林值來動畫化。

例如，我們可以定義一個動畫，在 5 秒後切換實體的可見性。

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

數字屬性

我們也可以為數字屬性設定動畫。例如，我們可以設定光基元的強度動畫。

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

顏色屬性

我們可以為任何具有顏色型別的元件屬性設定動畫。例如，我們可以將一個框從白色設定為紅色。

<a-entity id="blushing-cube" 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>