Lottieで簡単にアニメーションを作る｜中央コンピューターサービス株式会社(CCS)

: こんにちは、技術開発推進部の加藤です。

: お、なんだか弊社のロゴが元気そうに動いてますね。
実はこれ、動画やGIFではなくリアルタイムで描画しているんですよ。

: F12で要素(Elements)を見てみると、SVGというベクターイメージがどんどん書き換わっていくのがわかります。

ベクターイメージでの描画ですので、ビットマップイメージ(jpgやpngなど)と違って、拡大しても全く劣化しないのが特徴です。

: 良くわかんないけどさぁ、こういうのって難しいんでしょ？

: あ、青汁おじさん

: ｺﾞｸｺﾞｸ…

: 実はこれ、難しいコーディングの知識は必要ないんですよ。

: マジ！？かなり複雑に動いてるように見えるけど

: リッチでモダンでライトなWebアニメーションを、コーディングの知識があまりないデザイナーでも実装が可能に！

そんな夢のようなライブラリーの名は「Lottie」です！

: ｺﾞｸｺﾞｸ!!

Lottieを実装してみる

: 全体の流れとして、
①AdobeのIllustrator(以下、イラレ)でオブジェクトを作る
②AfterEffects(以下、AE)でアニメーションを作る
③BodyMovinというAEのライブラリを使って、アニメーションをjson形式で出力する
④出力されたjsonファイルをLottieを用いてWeb上に描画する
となっています。

: え！Adobeのソフト使うの！？

: Lottieのサイトでフリーのjsonファイルをダウンロードするか、Lottieのサイト上で簡単なアニメーションを作る方法もあります。

ただ今回はAEで作ったオリジナルアニメーションを、そのままWebアニメーションとして使用する方法を紹介します。

ですので、おじさんもAdobeと契約しておいてください。

: …ｺﾞｸﾘ

: まずイラレで使用したいオブジェクトを描きます。

円や四角や線など簡単な部品はAEでも描画出来ますので、複雑な形のものだけ作りましょう。

: イラレの使い方わかんないんだけど。

: 次にAEに「BodyMovin」というライブラリを導入します。

LottieのGithubからzxpファイルをダウンロード出来ますので、ZXP installerを使ってインストールします。

インストール後、AEの環境設定の「スクリプトによりファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れておきます。

: では、AEでアニメーションを作っていきましょう。

イラレで作成したデータはシェイプレイヤーに変換して使います。文字もアウトライン化しておきましょう。

また、AEのエフェクトや一部マスク機能などが使えないので、どの効果がBodyMovinに対応しているかは調べておくと良いです。

: AEの使い方わかんないんだけど。

: 頑張ってください。

: ｺﾞｸｺﾞｸ…

: 作成したアニメーションをBodyMovinを使ってjson形式に書き出します。

ウィンドウ→拡張機能→BodyMovinを選択し、出力先のパスを入力して、Renderをクリックします。

: 出力されたjsonファイルを見てみましょう。

: レイヤー情報や座標位置がビッシリ書かれている…ような気がする。

: ちゃんと書き出せてますね。

見ての通りjsonファイルは文字だけで構成されているので、GIFや動画と比べてサイズが軽く、読み込み速度がとても早いんですよ。

では、このjsonファイルをWeb上に置いて、Lottieのスクリプトで読み込んでみましょう。

: いよいよ実装か…


<script src="/*****/****/js/lottie.min.js"></script> //lottieのscript読み込み

<div id="lottie" style="height:300px"></div> //描画用divタグ

<script>
   var animation = lottie.loadAnimation({
       container: document.getElementById("lottie"), //HTMLのID
       renderer: "svg",
       loop: true, //ループ
       autoplay: true, //自動再生
       path: "/****/*****/***/file/article-476.json" //jsonファイルの場所
   });
</script>

: くぅ～疲れましたｗこれにて実装完了です！

: これだけ！？

: そう、すごく簡単に実装出来るんです！

今回はただ表示するだけですが、jQueryを使えばクリックやマウスオーバーをトリガーとして、アニメーションを再生することも出来ます。

クリックしたらロケットになって飛んでいくボタンとか、マウスオーバーしたらアメーバみたいにうねうね動くボタンとか、可能性は無限大です！

: サイトを開いたときに全画面でアニメーションを表示させたり、スクロールに応じて再生させたりすれば、ナウなヤングにバカウケのイケてるサイトが簡単に作れそうだ！

: Lottieはスマホ端末でも描画可能ですし、Androidアプリなどでも活用できるんです。
もはや革命！といっていいほど超簡単で超凄いツールなんですよ！

: おじさんはイラレとAEのハードルが高いな…。

: 先程ちらっと言ったように、Lottieの公式コミュニティのページでは沢山の人がアニメーションを上げてます。
それをjson形式でダウンロードして配置すれば、少しの実装でリッチなアニメーションを簡単に表示させられますよ。
ただ、各アニメーションにはクリエイティブ・コモンズ・ライセンスが設定されてますので、そちらに準拠し実装してくださいね。

: おお！最初に見たアニメーションより、かなりクオリティが高いやつが沢山！

: …。

Lottieなら、アニメーションの作成だけをAEが得意な人に頼むことも出来ますよ。

: じゃあ、キミに作ってもらおうかな！

: 嫌です。

: …飲む？

: 飲みません。

: …。

: ｺﾞｸｺﾞｸ…

最後にもう一度！

当ページの人物画像はNIGAOE MAKERで作成しました。

フリー写真素材ぱくたそ