aframe
アニメーション
サーチ…
前書き
A-Frameのアニメーションとトランジションは、 <a-animation>要素を子として使用して定義されます。このシステムは、Web Animationsの仕様に基づいています。 A-Frameはtween.jsを内部的に使用します。
備考
属性
アニメーション属性の概要を次に示します。以下で詳しく説明します。
| 属性 | 説明 | デフォルト値 |
|---|---|---|
| 属性 | アニメートする属性。コンポーネント属性を指定するには、componentName.property構文（ light.intensity ）を使用しcomponentName.property 。 | 回転 |
| ベギン | アニメーションを開始する前に待機するイベント名。 | '' |
| ディレイ | アニメーションを開始する前に待機する遅延（ミリ秒単位）またはイベント名。 | 0 |
| 方向 | アニメーションの方向（ fromとto間）。 alternate 、 alternateReverse 、 normal 、 reverseです。 | 正常 |
| 〜する | アニメーションの長さ（ミリ秒）。 | 1000 |
| イージング | アニメーションの機能を緩和する。選択肢は非常に多くあります。 | 容易に |
| 終わり | アニメーションを停止する前に待機するイベント名。 | '' |
| 埋める | 積極的にプレイしていないときのアニメーションの効果を決定します。一つのbackwards 、 both 、 forwards 、 none 。 | フォワード |
| から | 開始値。 | 現在の価値。 |
| 繰り返す | 繰り返し回数またはindefinite 。 | 0 |
| に | 終了値。指定する必要があります。 | 無し |
ベギン
begin属性は、アニメーションの再生開始時期を定義します。
これは、待機するミリ秒を表す数値 、または待機するイベント名のいずれかです。例えば、エンティティをスケーリングする前に2秒待つアニメーションを定義することができます。
<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>
あるいは、エンティティをfadeする前に親要素が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ヨーヨーのような値。交互の方向は、アニメーションを繰り返すときにのみ影響します。
| 値 | 説明 |
|---|---|
| 代わりの | 偶数番号のサイクルでは、from from to toアニメートtoます。奇数番号のサイクルではto 〜 from toアニメーション |
| 交互反転 | 奇数番号のサイクルでは、from from to toアニメートtoます。偶数番号のサイクルではto 〜 from toアニメーション |
| 正常 | アニメーションfromにto 。 |
| 逆 | 〜 fromアニメーションto 。 |
緩和
easing属性は、アニメーションのイージング関数を定義しease 。リストする関数はあまりにも多くありますが、暗黙的に説明することはできます。
可能な値の1つは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とその効果の可能な値を示します。
| 値 | 説明 |
|---|---|
| 後方に | アニメーションが開始する前に、開始値をfrom値に設定fromます。 |
| 両方 | 後方への充填と前方への充填の両方の効果を組み合わせる。 |
| フォワード | アニメーションが終了すると、最終値はto値にとどまります。デフォルトの塗りつぶし。 |
| 無し | アニメーションが開始する前に、開始値を初期値に設定します。アニメーションが終了したら、値を初期値にリセットします。 |
繰り返す
repeat属性は、アニメーションの繰り返し回数を定義します。アニメーションの各繰り返しを1サイクルと呼びます。 Repeatは、アニメーションが終了する時点で0になるまで、またはアニメーションが手動で削除または停止されるまで、アニメーションがindefinite repeatれるように設定することができます。
イベント
<a-animation>要素は、いくつかのイベントを送出します。
| イベント名 | 説明 |
|---|---|
| アニメ | アニメーションが終了すると発生します。リピートの場合は、リピート回数が0ます。無期限の繰り返しの場合は出力されません。 |
| アニメーションスタート | アニメーションの再生が開始されると直ちに放出されます。 |
アニメーションの例
導入の例として、10秒かかるY軸に関するエンティティ上の5メートルの軌道を定義するために、位置をオフセットして回転をアニメートすることができます。このアニメーションは、Y軸を中心に0度の最初の回転から始まり、約360度回転します。これは10000ミリ秒の持続時間で定義され、アニメーションの各サイクルで最終値を維持し、無限にループします。
<a-entity position="5 0 0" rotation="0 0 0">
<a-animation attribute="rotation"
to="0 360 0"
dur="10000"
fill="forwards"
repeat="indefinite"></a-animation>
</a-entity>
異なるタイプのプロパティのアニメーション化
A-Frameのアニメーションシステムは、さまざまな種類のプロパティをアニメートできます。
vec3のプロパティ
A-Frameには標準的なvec3コンポーネント（ position 、 rotation 、 scale ）があります。これらのコンポーネントは、X、Y、Zの3つの要素で構成されています。エンティティで定義するのと同じように、 fromおよびto属性に3つのスペース区切りの数値を渡すことができます。この場合、アニメーションシステムは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を使用してコンポーネントプロパティを選択しcomponentName.propertyName 。
例えば、コーンのトップ半径をアニメーション化するために、我々は選択できradiusTopで値をgeometry.radiusTop 。
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>