Lottieで簡単にSVGアニメーションを実装！After Effects初見からWEBページ設置までの流れをまとめました
昨年開催された「Adobe MAX 2021」にて、Adobe XDのLottieアニメーションの再生サポートが発表されました。
当時セッションを見ていた私は、「Lottie」ってなぁに？(*ﾟoﾟ*)ﾎﾟｹｰ...という感じでふわっと認識している程度で、Webアニメーションについて知りたいと思ってはいたものの、後回しになっている状況でした。
しかし事態は一転！昨今のウェブサイトには、アニメーションでの表現が不可欠。
SVGとCSSアニメーションを少しずつ勉強し始めたところですが、複雑な表現には対応できず、デザイナーの私にとって、javascriptでガリガリコードを書いて実装するのは夢のまた夢...。
そこで、頭の片隅にあった「Lottie」アニメーションを思い出し、実装の検証をスタートしました。
そもそも「Lottie」って？
「Lottie」(公式サイト：https://airbnb.design/lottie/ )とは、Airbnbが開発したアニメーション用ライブラリです。
After Effectsで作成したアニメーションを、JSONファイルで書き出すことができます。
After Effectsをインストール＆プラグインの導入
早速After Effectsをインストールし、Bodymovinプラグインを導入します。
Adobe Exchange からインストールする方法が簡単でした。(使用するAfter Effectsと同じAdobe IDでログインします)
インストール後、After Effectsを起動し、メニュー[ウィンドウ]-[エクステンション]-[Bodymovin]で、Bodymovinのパネルが表示されることを確認します。
また、ファイルを書き出す際には、環境設定の[スクリプトとエクスプレッション]-[スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可]にチェックを入れておくことで、ファイル出力が可能になります。
チュートリアルの実施
After Effects完全初見のためウィンドウやパネルを見ても何もかもさっぱり...。
ひとまず「After Effectsへようこそ」のチュートリアルを一通り行いました。
基本的な機能やパネルの使い方を理解し、いざ動画づくりへ！
Illustratorにてベクターデータを用意
SVGアニメーションのため、ベクター形式のイラストを用意します。
(イラストAC様 の素材をお借りしました)
動かしたい部品ごとにグループ化＆レイヤーを分けておきます。
After Effectsにてアニメーションを付けて保存
用意したaiファイルをAfter Effectsに取り込み、表現したいアニメーションを作成します。
After Effects Bodymovinにてアニメーションを書き出す
アニメーションが作れたら、ファイルを書き出します。
[ウィンドウ]-[エクステンション]-[Bodymovin]を選択します。
画像のような画面が起動したら、変換するファイルを選択(Selectedのチェック)、保存場所を設定し、[Render] → [Done]でJSONファイルが書き出されます。
htmlの準備
headタグ内でlottie.jsまたはlottie.min.jsを読み込みます。こちら からLottieを取得できます。
<head> <script src="lottie.min.js"></script> </head>
bodyタグの中には、Lottieアニメーションを表示できるようにします。ここでは、id名を「mainvisual」としています。
<body> <div id="mainvisual"></div> </body>
javascriptでLottieの呼び出し処理を行います。
<script>
var animation = lottie.loadAnimation({
container: document.getElementById("mainvisual"), //呼び出し位置の要素に入れたIDを指定
renderer: "svg", // svg・canvas・htmlの3種類から機能に応じて指定(省略可、デフォルトはsvg)
loop: false, // ループの有無を指定(省略可、デフォルトはtrue)
autoplay: true, // 自動再生の有無を指定(省略可、デフォルトはtrue)
path: "animation01.json" //使用するJSONファイルがある実際のディレクトリ名・ファイル名を入れる
});
</script>
あとはWebサーバーにアップすればOK！( ˘ω˘ )
...とそんなに簡単ではありませんでした。
Lottieで使える表現には制限がある
作成したファイルには、いくつかLottieで対応していない内容があったため、htmlに反映しても正しく表示しない状態に。
なんでやー！となりながら調べたところ、以下の表現が未対応だそうです。
[〇使用可]
・単色で構成されたオブジェクト
・パスのトリミング
・不透明度、スケール、回転など、基本的なアニメーション
・背景透過
[×使用不可]
・グラデーション（塗り・線）
・複雑なエフェクト（After Effects標準装備のエフェクト全般）
・リッチな画像効果
・3D表現
・マスク
・BGMなど音をつける
■今回の失敗例
・イラストにグラデーションを使っていた
・そもそも取り込んだイラストがaiデータのままだとダメ
・After Effects標準機能のエフェクト(リニアワイプ)を使っていた
グラデーションが使えないため、aiファイルを修正し単色塗りに変更、タイムラインパネルに取り込んだaiファイルは、右クリックのメニューから[作成]-[ベクトルレイヤーからシェイプを作成]でシェイプレイヤーへの変換を行い、アニメーションで使用していたエフェクトは使わずに、対応範囲内でできる表現にそれぞれ変更。
再度JSONファイルを書き出し、反映したところ無事htmlに表示することができました！
おまけ アニメーション実行のタイミング調整
今回はスクロールした表示時に発動させたいため、jQueryでタイミングをコントロールしました。
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
var animation = lottie.loadAnimation({
container: document.getElementById("mainvisual"),
renderer: "svg",
loop: false,
autoplay: false,
path: "animation01.json"
});
window.addEventListener('scroll', event => {
var windowHeight = window.innerHeight;
var targetTop = document.getElementById('mainvisual').getBoundingClientRect().top;
if(0 < targetTop && targetTop <= windowHeight - 200) {
animation.play();
window.removeEventListener('scroll');
}
});
});
</script>
最後に
まだまだ表現の制限がかかるものの、Webアニメーション実装へのハードルはグンと下がりました。
特に、動きの部分をスクリプトではなく、After Effects上で作ることができるので、私を含めコードが書けないデザイナーさんにとって大きなメリットに感じます。今後開発が進み、エフェクトなども対応されるようになると、さらに表現の幅が広がりそうです。
これを機にAfter Effectsの勉強も頑張っていこうと思います。
フォローしませんか？
お気軽にご依頼・ご相談ください
