PR/BLOG

広報・ブログ

Lottieで簡単にアニメーションを作る

加藤さん

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

加藤さん

お、なんだか弊社のロゴが元気そうに動いてますね。
実はこれ、動画や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>
加藤さん

くぅ~疲れましたwこれにて実装完了です!

青汁おじさん

これだけ!?

加藤さん

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

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

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

青汁おじさん

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

加藤さん

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

青汁おじさん

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

加藤さん

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

青汁おじさん

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

加藤さん

...。

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

青汁おじさん

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

加藤さん

嫌です。

青汁おじさん_飲む

...飲む?

加藤さん

飲みません。

青汁おじさん_飲む

...。

青汁おじさん_ゴクゴク

ゴクゴク...

最後にもう一度!

  • 当ページの人物画像はNIGAOE MAKERで作成しました。
一覧に戻る
ゆりちゃん

技術開発推進部ゆりちゃんからのお願い顔マークを押して、技術ブログの
感想をお聞かせください^^