超簡単!A-Frameアニメーションの書き方まとめ

A-Frame アニメーション 回転

更新日: 2020-05-01

今回は、VRコンテンツをHTML風に簡単に書けるA-Frameを使って、WordPress記事内に作成した3Dコンテンツにアニメーションをつけてみようと思います!どれも簡単に書けるので試してみると面白いとおもいます!

ちなみに、A-Frameでアニメーションを記述する際には、<a-entity> にプロパティとして記述する方法と、<a-animation>というタグを使う方法がありますが、後者はdeprecateとなっており<a-entity>を使ったほうがよいです。

バージョン0.9.0の公式ドキュメントでは、Core API一覧からanimationは削除され、components一覧に記載されるようになっています。

Entityの準備

今回は以下のように2つの平面(plane)を準備します。コードを以下のような感じです。この赤色の平面に対して、アニメーションを付けて行きたいと思います。

また、マウスオーバー時のアニメーションを記述するために、camera(<a-camera>の部分)も準備しておきます。※マウス操作が不要なアニメーションについてはマウス操作を無効にしています。

<a-scene embedded>
  <a-entity
    geometry="primitive: plane; height: 5; width: 5"
    material="color: red"
    position="0 0 -10"
    rotation="0 0 0">
  </a-entity>
  <a-entity
    geometry="primitive: plane; height: 30; width: 30"
    material="color: green"
    position="0 -3 0"
    rotation="-90 45 0">
  </a-entity>
  <a-sky
    color="#ECECEC">
  </a-sky>
  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>
</a-scene>

上のコードを書いてブラウザで見てみるとだいたい以下のような感じになります。中央の黒い○がcameraで、この位置にマウスのカーソルがあるとみなされます。
A-Frame 平面 アニメーション サンプル

A-Frameでは、以下のようなアニメーションであれば簡単に付与することができます!

上下左右に動かす

animation属性の値にobject3D.position.(x|y|z)を指定して、toに動かす位置を指定します。dir: alternate および loop: trueを指定することで、無限に動かし続けることができます。

dir: alternate では、元の位置(もしくはfromで指定した位置)〜 toの位置 〜 元の位置 というように繰り返しの動きを表現しています。

上下に動かす

<a-entity
  geometry="primitive: plane; height: 5; width: 5" material="color: red"
  position="0 0 -10"
  rotation="0 0 0"
  animation="property: object3D.position.y;
             to: 2.0;
             dir: alternate;
             dur: 1000;
             loop: true">
</a-entity>

左右に動かす

<a-entity
  geometry="primitive: plane; height: 5; width: 5"
  material="color: red"
  position="0 0 -10"
  rotation="0 0 0"
  animation="property: object3D.position.x;
             to: 2.0;
             dir: alternate;
             dur: 1000;
             loop: true">
</a-entity>

positionで座標指定することもできます。

<a-entity
  geometry="primitive: plane; height: 5; width: 5"
  material="color: red"
  position="0 0 -10"
  rotation="0 0 0"
  animation="property: position;
             to: -2 -2 -10;
             dir: alternate;
             dur: 1000;
             loop: true">
</a-entity>

繰り返しの動きで、切り返し時もなめらかに動かしたい場合は、easingを使います。上と見比べると違いがわかると思います。easingを使ったほうが動きが自然ですね!

<a-entity
  geometry="primitive: plane; height: 5; width: 5"
  material="color: red"
  position="0 0 -10"
  rotation="0 0 0"
  animation="property: position;
             to: -2 -2 -10;
             dir: alternate;
             dur: 1000;
             loop: true;
             easing: easeInOutSine">
</a-entity>

回転させる

回転させるには、rotationを使います。from, to にはそれぞれの座標軸ごとに回転させたい角度を指定します。

<a-entity
  geometry="primitive: plane; height: 5; width: 5"
  material="color: red"
  position="0 0 -10"
  rotation="0 0 0"
  animation="property: rotation;
             from: 0 0 0;
             to: 0 0 360;
             dir: alternate;
             dur: 1000;
             loop: true;
             easing: easeInOutSine">
</a-entity>

拡大・縮小させる

拡大・縮小には、property: scaleを使います。toには、x, y, z軸それぞれの倍率を指定します。

<a-entity
  geometry="primitive: plane; height: 5; width: 5"
  material="color: red"
  position="0 0 -10"
  rotation="0 0 0"
  animation="property: scale;
             dur: 2000;
             to: 1.5 1.5 1.5;
             dir: alternate;
             loop: true">
</a-entity>

点滅させる

property: visibleを使えば、entityを見えなくすることができます。それをloopさせることで点滅しているように見せることができます。

<a-entity
  geometry="primitive: plane; height: 5; width: 5"
  material="color: red"
  position="0 0 -10"
  rotation="0 0 0"
  animation="property: visible;
             from: false;
             to: true;
             dir: alternate;
             dur: 1000;
             delay: 1000;
             loop: true">
</a-entity>

しかし、少し動きが急でもっと緩やかに消したい場合もあるかと思います。true/falseの値にはeasingがうまく働かないので、そういうときは以下のようにmaterial.opacityを使うとよいです。materialの部分にtransparent: trueを足す必要があるので注意です。

<a-entity
  geometry="primitive: plane; height: 5; width: 5"
  material="color: red; transparent: true"
  position="0 0 -10"
  rotation="0 0 0"
  animation="property: components.material.material.opacity;
             from: 0;
             to: 1;
             dir: alternate;
             dur: 1000;
             loop: true">
</a-entity>

マウスオーバー時に動かす

マウスオーバーをトリガにしてアニメーションを動作させる場合には、startEvents: mouseenter および startEvents: mouseleaveを使います。

以下の例では2つのアニメーションを記述して、マウスオーバー時に平面を1.2倍に拡大、マウスリーブ時に元に戻すように書いています。アニメーションを2つ以上記述する場合には、animation__xxxxのように属性名がユニークになるようにする必要があります。

<a-entity
  geometry="primitive: plane; height: 5; width: 5"
  material="color: red"
  position="0 0 -10"
  rotation="0 0 0"
  animation__in="property: scale;
                 dur: 300;
                 to: 1.2 1.2 1.2;
                 startEvents: mouseenter"
  animation__out="property: scale;
                  dur: 300;
                  to: 1 1 1;
                  startEvents: mouseleave">
</a-entity>

マウスオーバー時に色を変える

<a-entity
  geometry="primitive: plane; height: 5; width: 5"
  material="color: red"
  position="0 0 -10"
  rotation="0 0 0"
  animation__in="property: components.material.material.color;
                 type: color;
                 dur: 300;
                 to: blue;
                 startEvents: mouseenter"
  animation__out="property: components.material.material.color;
                  type: color;
                  dur: 300;
                  to: red;
                  startEvents: mouseleave">
</a-entity>

最後に

とりあえずA-Frameの最も基本的なアニメーションの書き方をまとめてみました。

これらのアニメーションを組み合わせて記述すれば少し複雑なアニメーションも作れると思います!

今回は基本的なアニメーションのみでしたが、今後時間があるときに随時追加していきたいと思います。

おすすめ記事

  • 最新人気マンガをお得に読むならebookjapan + Yahoo!プレミアム会員が最強!最新人気マンガをお得に読むならebookjapan + Yahoo!プレミアム会員が最強! 小学生の頃から結構なマンガ好きで、社会人になった今でも毎日のようにスマホでマンガを読んでいます。 私が子供の頃は、父親に古本屋に連れて行ってもらって、かなり安くマンガを買うことが多かったですが、現在は収納スペースや妻の目を気にした結果、電子書籍がメインになりつつあります […]
  • 宿河原スパイスハウスでヤングステーキを食べてきました!宿河原スパイスハウスでヤングステーキを食べてきました! 宿河原の「ステーキ&シーフードレストラン […]
  • キューズベリーのコンパクト抱っこ紐を徹底レビュー!パパでも使えるおしゃれな軽量抱っこひもキューズベリーのコンパクト抱っこ紐を徹底レビュー!パパでも使えるおしゃれな軽量抱っこひも 抱っこ紐は今や赤ちゃんの寝かしつけやお出かけの際の必需品です! 抱っこ紐にはいくつか種類がありますが、コンパクト抱っこ紐は軽量でコンパクト・シンプルなのが売りで、さっと取り出して使えて持ち運びも便利なお手軽さがメリットです! 抱っこ紐は装着するとごちゃごちゃして動 […]
  • 絶景!千畳敷カールで山デビュー♪絶景!千畳敷カールで山デビュー♪ 軽井沢旅行の帰りに駒ケ根でもう一泊して千畳敷カールに行きました。千畳敷カールは、長野県のちょうどど真ん中あたりでしょうか?ちょうど日本アルプスと呼ばれる高い山のある場所です!   カールってなんだ?と思った方、私は地理はちんぷんかんぷんなので、カー […]
  • ポルトガル・リスボンへ行ってきました!ポルトガル・リスボンへ行ってきました! 2017年5月にポルトガル・リスボンへ行ってきました!成田空港からアムステルダムで乗り換えて、ポルトガルのポルテラ空港へ到着です。12時間以上の長旅でした。ちなみにリスボンは、ポルトガルのこの辺りに位置しています。緯度は日本と大体同じです。 空港からリスボン市街ま […]
  • そこそこ漫画好きの私がおすすめするファンタジー系漫画!!そこそこ漫画好きの私がおすすめするファンタジー系漫画!! 私は小学校のころからアニメや漫画が大好きな小学生でした。今ではもう30近い大人ですが、今でも単行本で新刊が出れば買う!くらいの漫画好きです! 今回は、そこそこの漫画好きの私が読んでいるオススメ漫画の紹介をやってみようと思います! 私が読んでいるおすすめ漫画それぞれ […]

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA