loading_logo

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

スポンサーリンク

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

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

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

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

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

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

LottieFiles
スポンサーリンク

Lottieの使い方

導入フロー

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

  1. ZXP Installerをダウンロード
  2. Bodymovinをダウンロード
  3. 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>

まとめ

After Effectをガンガン使いこなせるようになれば、結構楽しめそうです。
ただし、やってみて思ったのはパラパラ漫画なようなイメージで、ベクトルファイルのレイヤーを繋げる場合はあんまり向いてないかなぁ。チラつきが気になったりしました。

マスクを使用する場合もあんまりやめた方がよさそうです。

CSSでSVGアニメーションを後々widthとか変更するのも、ある程度最初からサイズ感は極端に大きくしたりしない方がいいかも。

何よりモーショングラフィックスとかもっとお勉強しないと、大したアニメーションは作れないし、それなりに工数もかかるので、仕事として使用する場合は、本当に使用するべきかっていう判断は必要になると思います。

でも、使いこなせれれば面白いっす!

COMMENT

  1. こんにちは。デザイナーです。
    まさに探していた情報に行き当たり参考にさせてもらいました。
    時間と労力を使って、記事を作った努力に感謝いたします。
    とてもわかりやすかった。

    • お役に立ててよかったです!
      Lottie使えばさらにデザインの幅広がりますよね。
      自分も最近多用しちゃってますよ。
      よかったら知り合いのデザイナーさんなんかにも共有してやってください〜。