members

members

【第一回】LottieでWebアニメーションを作る (導入編)

Tweet

ウェブサイト制作では、アニメーションがますます重要になってきています。

表現方法にさまざまな手法がある中、マルチプラットフォームに対応し、手軽にそして軽量に動画実装することができるLottieを使用するサイトやアプリも多く見られるようになってきました。

この記事ではLottieのメリットと導入方法をご紹介していこうと思います。

目次

  1. Lottieとは
  2. Lottieのメリット・注意事項
  3. Lottie導入の手順
  4. 最後に

 

1.Lottieとは

Lottieは、Android、iOS、Web、Windows用アニメーションライブラリで、Airbnbが開発しています。拡張プラグインBodymovinを使用すれば、Adobe After Effectsで作成したアニメーションをjsonとしてエクスポートでき、モバイルおよびWeb上でアニメーションを表示することができます。

どのようなアニメーションを作ることができるかはこちらを見てもらえるとわかるかと思います。シンプルなシェイプアニメーションが多く、いろんなアニメーションがすでに様々な用途で実装されています。

 

2.Lottieのメリット・注意事項

メリット

  • マルチプラットフォームに対応。iOS、Android、Web、React NativeでLottieファイルを変更せずに利用できる。
  • SVGファイルで解像度を気にせずに拡大縮小が可能。
  • ファイルサイズが動画ファイルに比べて軽量。
  • 高品質のシェイプアニメーションを実現できる。
  • ホバー再生や逆再生、ループ機能などアニメーションを制御できる。

 

注意事項

  • 制作時の自由度には制限がある (画像、グラデーションなど)どのような機能が使えるかはこちらをご確認ください。
  • デザイナーにAfterEffectsを基本知識が必要になる。AfterEffectsを使ったアニメーションの作り方は次回にまとめてお伝えしようと思います。

 

Lottieを導入したほうが良い例

  • 全体的なUIデザインがシンプルでSVGで表現しやすい
  • 他のライブラリを併用していない
  • シンプルなインタラクションを使いたい時
  • ベクターデータ(svgなど)のリッチなアニメーションを簡単に実装したい時

 

3.Lottie導入手順

  1. ZXPInstraller をインストールする
  2. Bodymovinをインストールする
  3. After Effectsでアニメーションを作成
  4. 作成したものをBodymovinを使ってJSONファイルを書き出す
  5. プレビューでJSONファイルを確認
  6. webサイトやアプリに実装する

 

1.ZXPInstraller をインストールする

こちらから各OSにあったものをインストールします。

 

2.Bodymovinをインストールする

こちらからBodymovinというJSONの書き出しをするためのAfterEffectsのプラグインをダウンロードします。

Bodymovinインストール画面

1.でインストールしたZXP installerを開き、bodymovin.zxpをドラッグ&ドロップする

インストール完了画面

この状態になったらダウンロード完了です。AfterEffectsを開き [ウィンドウ] > [エクステンション]を確認すると、Bodymovinが追加されています。

 

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

Lottieで表現できるおすすめのアニメーション制作方法や注意事項については、後日まとめた記事を投稿予定です。

今回はアニメーションの作り方の部分は説明を省かせていただきますが、簡単なハートボタンのアニメーションを作成しました。

ハートボタンのアニメーション

 

4.作成したものをBodymovinを使ってJSONファイルを書き出す

書き出す前に、[AfterEffects] > [環境設定] > [スクリプトとエクスプレッション]の[スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可]にチェックを入れます。

[スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可]にチェックを入れます

[ウィンドウ] > [エクステンション] > [bodymovin]を選択し、対象のコンポジションの右側にある[…]から保存先と名前を設定します。

Bodymovinの保存先を決めます

あとは [Render] > [Done]でjsonが書き出されます。

 

5.プレビューでJSONファイルを確認

エンジニアに連携する前に書き出したJSONファイルで問題なく表示されるかチェックします。

こちらにJSONファイルをドラッグアンドドロップするだけでプレビューすることができます。

lottieのプレビュー画面

うまく表示されなかったり、思った通りの動きをしなかった場合はデータの作り方に問題があると思うので、再度AfterEffectsでデータチェックを行ってください。

 

6.webサイトやアプリに実装する

まずはLottieを読み込みます。こちらからLottieを取得し、lottie.min.jsを読み込みます。

<script src=”lottie.min.js” type=”text/javascript” charset=”utf-8″></script>

 

HTMLでタグにIDを付与しておき、以下のjsコードを書くと表示することができます。

$(function(){

     var animation = lottie.loadAnimation({

         container: document.getElementById(“ここにID”),

         renderer: “svg”,

         loop: false, //ループ

         autoplay: false, //自動再生

         path: “JSONのファイルパス”

     });

 });

 

また任意のタイミングでアニメーションを開始させたい場合も簡単に実装できます。例えばクリックで再生させる場合、インスタンスを変数にいれておき、クリックのタイミングでplayで呼んであげるとそのタイミングでの再生が可能になります。

document.getElementById(‘txt-link’).addEventListener(“click” , function(){

   hearts-lottie.play();

});

 

4.最後に

まだサポートしていない機能にだけ気をつけていれば、大きな問題がなく制作することができました。AfterEffectsを使えるのが条件になりますが、かなり簡単にリッチなアニメーションを実装することができると思います。

今回はLottieを導入する手順をまとめさせていただきました。次回はデザイナー向けにLottie用にアニメーションを作る際、おすすめのAfterEffectsの機能やアニメーション方法についてまとめようと思います!

 

コラム執筆

山本 愛加(やまもと あいか)

2018年4月入社。第5ビジネスユニットアカウントサービス第3ユニットに所属するデザイナー。

関連記事

メンバーズのUXデザイン支援

WebアニメーションはLottieがオススメ!基本の使い方完全ガイド【2020年版】