複雑なsvgアニメーションはアフターエフェクトを使うと簡単・便利
同じような仕事をしている方々であればコンプリートプランでAdobeのソフトを使っている方も多いのではないかと思います。
以前から興味があった『アフターエフェクト』で作成したアニメーションをプラグイン「Bodymovin」と「LottieFiles」を使ってwebサイト用のsvgアニメーションに落とし込むことができたので紹介します
『アフターエフェクト』の使い方は紹介できるレベルではないです（この記事を書いている時点で使い始めて1日目）が、AdobeのチュートリアルとYouTubeでアップされていた初心者用動画1本だけでここまで作れるのでかなりおすすめです。
※ web上で表現できないものもあるので使える機能は限られています。
この記事の目次
作ったものと用意するもの
今回作ってみたものが以下のアニメーション付きのグラフになります。
svgなので拡大縮小に強いのでレスポンシブ等もバッチリ！IEでも問題なく表示できます。
ブラウザのシェア率を棒グラフをアニメーション付きで表現してみました。
用意するもの
用意するものは『アフターエフェクト』とアフターエフェクトのプラグイン『Bodymovin』の2つです。
この2つを用意してアフターエフェクトでアニメーションをまずは作成しましょう。
アフターエフェクトの拡張機能『Bodymovin』はアフターエフェクトのアニメーションを解析して、webで読み込み可能なJSONファイルとして出力できるプラグインになります。
インストールはCreativeCloudDesktopから行えます。
Bodymovinの使い方
ここで紹介するアフターエフェクトで作ったアニメーションをwebに落とし込むために、『Bodymovin』を使ってjsonファイルを生成していきます。
作業はアフターエフェクトで行います。
アフターエフェクトでアニメーションを作る
まずはアフターエフェクトでアニメーションを作ります。
作り方はここでは紹介しませんがAdobeのチュートリアルと必要であればYouTubeでアップされていた初心者用動画を参考にするといいと思います。
※ web上で表現できないものもあるので使える機能は限られています。参考にした動画のものはweb上ではきれいに動きませんでしたので改良も必要です
Bodymovinを立ち上げる
アニメーションが完成したら『Bodymovin』を使ってjson形式で書き出していきます。
『Bodymovin』をインストールした状態で「ウインドウ」→「エクステンション」→『Bodymovin』の順に選択していきます。 選択すると『Bodymovin』が立ち上がります。
Bodymovinの書き出す準備をする
『Bodymovin』が立ち上がったら書き出し用の設定をします。 何を書き出すかを選び、書き出しの際の保存場所を指定できたら「Render」をクリックします。
json書き出し完了
「Render」をクリックするとプログレスバーが表示されます。
少し待ってると下に表示されている「Cancel」が『Done』変化するのでクリックすれば書き出しは完了です。
保存先を確認してみましょう。
書き出せない場合
アフターエフェクトをインストール直後の状態で作業していたらうまく書き出せませんでした。
この問題は環境設定を変更することで解決します。
環境設定から「スクリプトとエクスプレッション」を選択し、『アプリケーションのスクリプト』欄の②項目ともチェックを入れましょう
jsonファイルが保存できていればアフターエフェクトでの作業は終わりです。
作ったjsonファイルは次のステップで使用するので確認したフォルダは開いたままにしておくといいでしょう。
LottieFilesを使う
作ったjsonファイルは『LottieFiles』でjsファイルに変換することができます。
登録が必要ですが、「FREE」と書いてあるので金銭の要求はされませんし登録は簡単ですぐに終わります。
サイトに移動し登録が完了したらメニューの「Design」内の『Preview』を選択します
jsonファイルをアップロード
アップロード用のページが表示されるのでアフターエフェクトで作ったjsonファイルをアップロードします。
ドラッグ&ドロップでアップロードできますよ
細かい設定画面を開く
アップロードが完了するとアニメーションのプレビューが表示されます。
「Expend」をクリックしてページを移動します。
移動先では「Handoff」をクリックしウィンドウ右側にサイドバーを表示し、中にあるえんぴつアイコンをクリックすると細かい設定画面に移動できます
細かい設定をする
細かい設定用のページでアニメーションを調整し、貼り付け用コードをHTML内に配置すれば完了です。
今回紹介用に作ったものは、「autoplay」以外のチェックを外しただけですが、要素がウインドウ内に入ったタイミングでアニメーションが開始されるので面倒なスクロールイベントの設定も省けます。
同じものを自力で作ろうとすると膨大な量のコードを書く必要が出てくるのでかなり大変です。おそらく今回紹介した方法を使ったほうが早く作れると思います。
といってもループの設定を切っただけです
