モーショングラフィックス

Scroll

モーショングラフィックスとは？

「モーション」・・・動きのこと

「グラフィックス」・・・画像やテキストを使った視覚表現



動きを加えたイラストや、実写やテキストを組み合わせた映像のこと



モーショングラフィックスのメリット

  • ・情報を正確に伝えることができる
  • ・印象に残りやすい
  • ・表現の幅が広がる
  • ・制作コストが比較的安い

モーショングラフィックスを実装するために

  • ・CSSのkeyframeを使用して
  • ・JavaScript・JavaScriptのアニメーションライブラリなどを使用して
  • ・Adobe After Effects・Figmaなどのデザインツールを使用して

今回はAdobe After Effectsにフォーカスして、アニメーションを作る部分を重点的に紹介します。

Adobe After Effectsを使用した実装フロー

Adobe After Effectsを使用した実装フロー

  1. 1.Illustratorなどのデザインツールで、イラストを準備する。
  2. 2.After Effectsを使用してイラストにアニメーションをつける。
  3. 3.2.で作成したアニメーションをJSON形式で書き出して、JavaScriptのライブラリであるLottieを使用してWebサイトに実装する。

実際にアニメーションを作成してみよう

ワクワク

上の画像に動きをつけて、より”わくわく感”を表現してみようと思います！


参考教材

09 楽【おもいをつたえるテキストアニメーション】

09 楽【おもいをつたえるテキストアニメーション】

▶︎Video Salonhttps://videosalon.jp/▶︎リンクweb: http://mooograph.com/Twitter: https://twitter.com/mooog

完成形はこちら

回転アニメーションと拡大縮小アニメーションの組み合わせ

After Effectsで画像ファイルを開く

画像ファイルを開く

実際にAfter Effects上でファイルを開くと上図のようになります。

赤枠内を操作してアニメーションを作っていきます。

アンカーポイントを設定する

アンカーポイントを設定する

対象物（ここでは「わ」）をどこを起点にアニメーションさせたいのかを決めます。

今回は全ての文字に対して、アンカーポイントを中央下部に設定しました。

①左右に回転するアニメーションを実装する

アニメーションを実装する

初期表示（0秒時点）として、アンカーポイントを起点に左に8度回転させます。

②左右に回転するアニメーションを実装する

アニメーションを実装する

8フレーム後にアンカーポイントを起点に右に8度回転させます。
ここでは1秒が30（29.97）フレームなので、1フレームは約0.03秒になります。

③左右に回転するアニメーションを実装する

アニメーションを実装する
  1. 1.0~8フレームの間に、左8度から右8度に回転
  2. 2.8~18フレームの間は、右8度のまま
  3. 3.18~26フレームの間に、右8度から左8度に回転
  4. 4.26~36フレームの間は、左8度のまま

アニメーションにイージング（動きの加減速）をつけたため、アイコンが砂時計のマークになっている。

④左右に回転するアニメーションを実装する

ここまでのアニメーションを確認する。

①拡大縮小アニメーションを実装する

アニメーションを実装する

今回は「スケール」の項目を変化させて、アニメーションを実装していきます。

②拡大縮小アニメーションを実装する

アニメーションを実装する

4フレーム・・・
「わ」の幅（X軸）を90%、高さ（Y軸）を110%
「わ」がちょうどまっすぐになるタイミングで細長くする。

③拡大縮小アニメーションを実装する

アニメーションを実装する

8フレーム・・・
「わ」の幅（X軸）を110%、高さ（Y軸）を90%
「わ」が右に8度回転するタイミングで潰れたようにする。

④拡大縮小アニメーションを実装する

アニメーションを実装する

8フレーム〜18フレームまでは、「わ」が右に8度回転している状態


12フレーム・・・
「わ」の幅（X軸）を95%、高さ（Y軸）を105%
潰れた状態から細長くする。


16フレーム・・・
「わ」の幅（X軸）を105%、高さ（Y軸）を95%
細長い状態から潰れたようにする。


上記のアニメーションを左に傾いた時にも同様に繰り返す。

完成

回転と拡大縮小のアニメーションを合わせて完成です！