Littie.js | アフターエフェクトで作ったモーションをSVGアニメーションとして再生する

カテゴリー: blog オン 2022年4月26日

Lottie.jsはAirbnbが開発したSVGアニメーションライブライラリで、After Effectsで作成したアニメーションをjsonとして書き出したものを、Webサイトで表示できる優れものです。(After Effectsからの書き出しはBodymovinというプラグインが必要。)

SVGなので拡大しても荒くならずデータも軽いです。

Windows、Mac、iOS、Androidで問題なく再生できるのでちょっと複雑なアニメーションを取り入れたい時に、気軽に実装できます。

簡単とは言いつつ、やってみると初回はつまずくところがあるのでプロジェクトの前に一通りやっておくとよいです。

Lttoie.jsで実装するときの注意点

  1. Bodymovinというプラグインが別途必要(検索ではLottie.jsの話題が多いので、2つのプラグインが必要ということに、しばらく気が付きませんでした)。
  2. After Effectsの使える機能に制限があるので、事前に何が使えるか把握しておく。
    以下に使用可能な効果が載っていますが、光彩系エフェクトは基本的に避けるのが無難でしょう。
    https://airbnb.io/lottie/#/supported-features
  3. json形式だとローカル環境で再生できないためコーディング中に確認しずらいのが難点です。ただし、js形式にして読み込むことも可能で、その場合はローカルでも動作が確認できます。

実際の案件で使用した例です。

https://kawashimazaidan.jp/

メインビジュアルの背景が拡大したり縮小します。実は2つのアニメーションを組み合わせて作っています。1つ目は1度だけ再生し、2つ目は最初のアニメーションが終わった後に繰り返し再生します。こういった調整はjavascriptでできます。他にもスクロールに合わせて再生したりもできるので、工夫しだいでWebならではの表現が可能になります。