Animation
アニメーションコンポーネントは、以下のような値をアニメーションやトゥイーンに使用することができます。
- コンポーネントの値（例：
position,visible） - コンポーネントのプロパティ値（例：
light.intensity)
また、値のアニメーション化など、.setAttributeを経由するよりも、パフォーマンスを高めるために値を直接トゥイーンさせることもできます。
- object3D上（例：
object3D.position.y、object3D.rotation.z) - コンポーネント内で直接（例：
components.material.material.color、components.text.material.uniforms.opacity.value),
例えば箱を変更します。
<a-box position="-1 1.6 -5" animation="property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-box>
もしくは半径5mの球体を周回します。
<a-entity rotation="0 0 0" animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">
<a-sphere position="5 0 0" color="mediumseagreen"></a-sphere>
</a-entity>
その他のオプションや、さまざまなタイプの値を適切にアニメーション化する方法については、以下をご覧ください。
# API
# Properties
| Property | 概要 | デフォルト値 | 値 |
|---|---|---|---|
| property | アニメーション化するプロパティ。コンポーネント名、ドットで区切られたコンポーネントのプロパティ（例：material.color）、またはプレーンな属性が使用できます。 | ||
| isRawProperty | パフォーマンス向上のため、A-Frame コンポーネント以外の任意のオブジェクトのプロパティをアニメートするためのフラグです。true に設定すると、例えば、components.material.opacity のようなプロパティを設定することができます。プロパティがcomponentsまたはobject3Dで始まる場合、trueとして推論されます。 | ||
| false | |||
| from | |||
アニメーション開始時の初期値。指定しない場合は、エンティティの現在のプロパティ値が使用されます（アニメーションの開始ごとにサンプリングされます）。安定性を保つために、可能であれば from を指定するのがベストです。 | null | ||
| to | アニメーション終了時の目標値 | null | |
| type | 現時点では isRawPropertyの色をXYZ/RGB vectorでトゥイーンすることしかサポートしていません | '' | |
| delay | 開始するまでの待ち時間（ミリ秒） | 0 | |
| dir | どのディレクトリからどのディレクトリへ移動するか。 | normal | alternate, reverse |
| dur | アニメーションの各サイクルの長さ（ミリ秒） | 1000 | |
| easing | アニメーションのイージング機能。イージングイン、イージングアウト、イージングイン、イージングアウトを行う | easeInQuad | See easings |
| elasticity | 弾む度合い（高い方が強い） | 400 | |
| loop | アニメーションを何回繰り返すか。trueを指定すると、アニメーションは無限に繰り返されます。 | 0 | |
| round | 値を丸めるかどうか | false | |
| startEvents | 再起動と再生のトリガーとなるリッスンするイベントのカンマ区切りのリスト。指定された場合、アニメーションは自動再生されません。startEventsはアニメーションを再開し、pauseEventsは再開するために使用します。エンティティ上に同じプロパティをアニメートする他のアニメーションコンポーネントがある場合、それらのアニメーションは衝突しないように自動的に一時停止されます。 | null | |
| pauseEvents | カンマで区切られた、一時停止をトリガーするために聞くべきイベントのリストです。resumeEventsで再開することができます。 | null | |
| resumeEvents | 一時停止後の再開のトリガーとなるイベントのカンマ区切りリスト | null | |
| autoplay | アニメーションを自動再生するかどうか。アニメーションが animation-timeline component (opens new window) コンポーネントに定義されている場合、指定する必要があります。 | true | |
| enabled | 無効にすると、アニメーションは停止し、startEvents はアニメーション開始のトリガーとならない。 | true |
# 復数のアニメーション
コンポーネントのベースネームはanimationです。コンポーネントの名前をダブルアンダースコア(__)で区切ることで、1つの実体に複数のアニメーションを付けることができます。
<a-entity animation="property: rotation"
animation__2="property: position"
animation__color="property: material.color"></a-entity>
# イージング
イージングは、アニメーションのサイクルを通して加速度や速度を定義します。
| easeIn | easeOut | easeInOut | Others |
|---|---|---|---|
| easeInQuad | easeOutQuad | easeInOutQuad | linear |
| easeInCubic | easeOutCubic | easeInOutCubic | |
| easeInQuart | easeOutQuart | easeInOutQuart | |
| easeInQuint | easeOutQuint | easeInOutQuint | |
| easeInSine | easeOutSine | easeInOutSine | |
| easeInExpo | easeOutExpo | easeInOutExpo | |
| easeInCirc | easeOutCirc | easeInOutCirc | |
| easeInBack | easeOutBack | easeInOutBack | |
| easeInElastic | easeOutElastic | easeInOutElastic |
# イベント
| プロパティ | 概要 |
|---|---|
animationbegin | アニメーションが開始された。イベントの詳細にはアニメーションの名前を含みます。 |
animationcomplete | アニメーションが終了した。イベントの詳細にはアニメーションの名前を含みます。 |
animationcomplete__<id> | アニメーションに ID がある場合、アニメーションは完了します(例, animation__click). |
# メンバー
el.components.animation.<MEMBER> としてアクセスします。
| Member | Description |
|---|---|
| animation | anime.js object. |
| config | anime.js に引き渡された設定 |
# setAttributeを用いてアニメーションをコントロールする
他のA-Frameコンポーネントと同様に、アニメーションコンポーネントは、要素のsetAttribute() (opens new window)を呼び出すことで、JavaScriptから設定することが可能です。
By デフォルトでは、アニメーションはすぐに再生を開始します（デフォルトでは autoplay は true です）。
しかし、このような方法でインターフェイスを使用する場合は注意が必要です。有限の (つまりループしない) アニメーションが、同一のパラメータで 2 回連続して要求された場合、2 回目のアニメーションは再生されず、animationcomplete イベントも生成されません。
これは、A-Frame が、2回目のリクエストを、既に要素に適用された設定に対する重複したリクエストと見なし、2回目のリクエストがアニメーションコンポーネントに到達しないためです。
より良い方法は、イベントを使ってアニメーションの開始を制御することです（次のセクションを参照）。
- 初期化時に、オブジェクトに必要と思われるすべてのアニメーションを設定し、アニメーションを開始するためにカスタムイベントを設定します。
- 特定のアニメーションを開始させたい場合は、setAttribute() ではなく emit() を使います。
これにより、アニメーションをより確実に制御できるようになります (同じアニメーションを 2 回連続で要求するような問題を回避できます)。また、アニメーション設定のオーバーヘッドを減らすことができます。
# イベントでのアニメーション
startEventsプロパティを使って、イベント発生時にアニメーションを行うことができます。
<a-entity id="mouseCursor" cursor="rayOrigin: mouse"></a-entity>
<a-entity
geometry="primitive: box"
material="color: red"
animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500";
animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500";>
</a-entity>
GlitchでイベントでのアニメーションをRemixする (opens new window).
明示的にイベントを発行してアニメーションを開始するには、次のようにします。
el.emit(`startanim001`, null, false);
emit の第3パラメータ (opens new window)を "false" に設定すると、イベントが親にバブルアップされないので、特定の要素だけをターゲットにしたアニメーションを作成することができます。
これは、例えば以下のように、独自の開始イベントに反応するアニメーションがすでに設定されていることを想定しています。
el.setAttribute(animation__001, {'property': position,
'to': {x: 1, y: 1: z: 1},
'startEvents': 'startanim001');
(アニメーションに startEvent を設定すると、自動再生が自動的に無効になります)。
# Animating Different Types of Values
さまざまな種類の値をアニメーション化するケースについて説明します。
# Component Values
単一プロパティのコンポーネントの値をアニメーション化したり（例：property: visible、booleanについては後で説明します）、"."をセパレータとして使用して複数プロパティのコンポーネントのプロパティをアニメーション化したり（例：property: light.intensity, property: material.color ）することが可能です。
プロパティがvec3である場合、それもサポートされています（例：property: someComponent.vec3Value; to: 5 5 5）。
しかし、この方法でコンポーネントの値をアニメーションさせると、アニメーションの各フレームで .setAttribute が呼び出されるので、最も最適な方法とは言えません。あちこちのアニメーションでは、これは大きな問題にはなりませんが、値を直接アニメーション化することで、時間とメモリを節約することができます。
geometryコンポーネントの値をアニメーションさせないようにするのが特別な注意点です。サイズをアニメーションさせたい場合は、むしろscaleをアニメーションさせましょう。
# ブーリアン値
アニメーションの最後にto値が適用されるブーリアン値を「アニメーション」させることができます。
例えば、property: visible; from: false; to: true; dur: 1のような感じです。
# object3D と components のダイレクト値
アニメーションコンポーネントは、object3Dやコンポーネントを介してダイレクトに値をアニメーションさせることをサポートしています。
例えば、object3D の値を property: object3D.position.z; のようにアニメーションさせることができます。これは、.setAttribute を呼び出すことなく、エンティティの object3D.position.z 値を直接トゥイーンさせます。
これは最も直接的な方法で、一度に一つの軸をアニメーションさせることができます。これは最も直接的な方法で、一度に1つの軸を動かすことができます。
注意：object3D.rotationでは、度が使用されます。
また、コンポーネントを触って値をアニメートすることもできます。例えば、property: material.opacity をアニメーションさせる代わりに、各フレームで .setAttribute を呼び出すと、property: components.material.opacity で不透明度の値を直接アニメーションさせることができます。
ドットで区切られたパスを使ってオブジェクトツリーを歩き、アニメートしたい値を見つければ、フードの下のアニメーション処理は数値を変更するだけになります。
# ダイレクトカラー値
three.jsのカラー値を直接アニメーションさせることは可能ですが、type:colorを指定する必要があります。つまり、property: material.color をアニメーションさせるのではなく、property: components.material.material.color; type: color とすることができます。
色値に関する注意点として、色値は16進数、色名、hsl、rgbを使用して指定できます（例：from: red; to: #または、rgb(100, 100, 100); から hsl(213, 100%, 70%))...
# anime.jsを直接使う
animeは有名で強力なアニメーションエンジンです。このコンポーネントは基本的なトゥイーン処理だけを行うことを好み、アニメができることの表面的な部分に触れています（例：タイムライン、モーションパス、プログレス、シークなど）。より多くのアニメーション機能が必要な場合は、anime.jsを直接呼び出す別のコンポーネントを作成します。animeは、AFRAME.ANIMEを介してアクセス可能です。
anime.jsのドキュメント (opens new window)とウェブサイト (opens new window)に目を通し、探求してください。
# 以下も御覧ください
← Utils ar-hit-test →