【Lottieの使い方】SVGアニメーションもっとこだわったオリジナル溢れるものを作りたい

SVGアニメーションを使うシーンは、デザインにこだわればこだわるほど増えていきます。

自分もちょっとしたページローディングくらいなら、フリーのアイコンを少しカスタマイズするぐらいでいいかなと思っていました。
けれど、それじゃあデザインの幅が広がらないというか、ページローディングだってやっぱりこだわりたいたくなってくるわけですよね。

まだそんな段階じゃなくて、フリーのものを使う程度でいいよって人はこちらの記事を参考にどうぞ。

で、今回使うのは動画編集してる人にはお馴染みのAdobe After Effects。
今回の記事は、After Effectsが使えることが前提ではありますので悪しからず。

具体的には、After Effectsで作ったアニメーションをLottieが提供している「Bodymovin」というオープンソースライブラリを使ってJSONファイルで出力し、そのJSONファイルを読み込みこんでSVGアニメーションとして出力するってもの。
「Bodymovin」は無料で使えるライブラリで、After Effectsの拡張プラグイン（エクステンション）としてインストールできます。

今回はWEBサイトへの使用方法を書いてますが、iOS、 Android、React Nativeに対応しているのでネイティブアプリにももちろんガンガン使えます。

Contents

Lottieの使い方
1. 導入フロー
After Effectsでアニメーション作成
1. 注意書き
2. After Effectsの環境設定を変更
Bodymovinを使ってJSON形式で書き出す
1. Settings方法
2. RenderでJSONを書き出し
Lottieサイトのプレビューページで確認
SVGアニメーションをWebサイトに表示させる
1. 1. JSで表示させる方法
まとめ

Lottieの使い方

導入フロー

まずは、環境を整えていきましょう。

ZXP Installerをダウンロード
Bodymovinをダウンロード
ZXP Installerを使ってbodymovin.zxpをインストール

1. ZXPInstallerをダウンロード

ちょっと面倒ですが、「Bodymovin（プラグイン）」をAfterEffectsにインストールする為に使います。ので、ダウンロードしましょう。

ZXP Installer

Download our free ZXP extension installer. It is designed to work when other installers fail.

WindowsとMacの環境用に用意されていますので、お使いの環境に合わせてダウンロードしてください。

2. Bodymovinをダウンロード

でAfter Effectsのプラグインである「Bodymovin」をダウンロードします。

airbnb/lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. - airbnb/lottie-web

「Clone or download」の「Download ZIP」でダウンロードします。
「lottie-web-master.zip」がダウンロードされ展開し、「bodymovin.zxp」を使用します。ちょっといろんなファイルが入ってるのでわかりづらいんですが。。。

build　>　extension　>　bodymovin.zxp　で辿れば見つかりはず。

3. ZXP Installer で bodymovin.zxp をインストール

ZXP Installerを開いて、「bodymovin.zxp」をドラッグ&ドロップすればインストール完了です。

インストールが終わったらAfter Effecsを起動します。
メニューから　ウィンドウ → エクステンション → Bodymovin があることを確認しましょう。

After Effectsでアニメーション作成

After Effectsでのアニメーションの作成方法は省きますが、Bodymovinを使用する上で注意事項を書いときます。

注意書き

SVGアニメーションを作る場合、イラストレーターでベクターファイルを作成して、After Effectsで読み込むパターンが多いかなぁと思うんですが、その場合「ベクトルレイヤーからシェイプ」をして、SVG化しないといけないんです。

これやっとかないとJSONで書き出しができないんですよね。

ベクトルレイヤーからシェイプする方法

レイヤーを右クリック → 作成 → ベクトルレイヤーからシェイプを作成

After Effectsの環境設定を変更

After Effectsの環境設定も少し変更しておきましょう。
環境設定 → スクリプトとエクスプレッションにて
「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」
にチェックを入れておきましょう。

Bodymovinを使ってJSON形式で書き出す

アニメーション作成が終わったら、Bodymovinを使ってJSONファイルに書き出します。

Settings方法

意外と重要なのがSettings。基本的には「Glyphs」を選択しておけば OK。
これを選択しておけば、フォントも図形に変換します。

RenderでJSONを書き出し

あとは、RenderをクリックでJSONファイルを書き出します。

Lottieサイトのプレビューページで確認

書き出したJSONファイルをLottieのプレビューページで確認することができます。

こんな感じです。

SVGアニメーションをWebサイトに表示させる

SVGアニメーションをLottieを使って表示させる方法は、すっごい簡単。

1. JSで表示させる方法

Lottieのjsライブラリを読み込んで表示させる方法が1つ。

まずはHTMLで

<div id="js-lottie"></div>

#js-lottieの場所にJSONファイルのアニメーションを表示させます。
で、次にJavascriptにLottieライブラリを読み込みます。

オプションで、ループや自動再生などの設定も可能です。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.7/lottie.min.js" crossorigin></script>
<script type="text/javascript">
  lottie.loadAnimation({
    container: document.getElementById('#js-lottie'), //アニメーションを表示する要素を指定
    renderer: 'svg', //アニメーションの形式。SVG以外は指定することがないと思います
    loop: true, //アニメーションをループさせるか
    autoplay: true, //自動再生させるか
    path: 'https://assets10.lottiefiles.com/packages/lf20_iETRZG.json' //Bodymovinで書き出したJSONファイルを指定
  });
</script>