2024年5月14日

Lottieを使ってAeで作ったループアニメーションをWix Studioに実装する

AfterEffectsで作ったループアニメーションをWix Studioに実装するため、BodymovinのプラグインとLottieFilesを利用しました。

LottieFilesは、Airbnb社が開発したオープンソースのアニメーションファイル形式です。公式Webサイトによると、GIFよりも600%小さいファアイルサイズかつ、約5倍速くページに読み込めるという驚きの軽さ！

無料プランであれば、今のところ10ファイルまで自分のダッシュボードに保存してアニメーションを書き出せます。

ちょっとしたモーショングラフィックデザインやループアニメーションをWebサイトに読み込むなら、ぜひ活用したいファイル形式の1つです。

まずはAeにBodymovinというプラグインをいれます。このプラグインが、AfterEffectとLottiefilesの橋渡し役になります。

aescriptsで$20の価格で販売されていますが、Adobeのアプリケーションにもありました！

ここから追加すれば無料でインストールできました。Adobeの方のレビューは★3.3と低めで、上手く動作しないというコメントもありましたが、今のところ私は特に問題なく使えています。

次にアニメーションをAeで作成します。今回は簡単なループアニメーションを作りました。揺れるキウイ…！

アニメーション設定ができたら、Bodymovinでjsonファイルを書き出します。

書き出したいコンポジションを選択すると、緑の丸が表示されます。

書き出す場所（Destination Folder）を選択し、Renderボタンをポチッと押すだけです。

数秒でjsonファイルが書き出しされました！

※ちなみにPreviewボタンを押しても上手くプレビュー表示されませんでした。バグ？

LottieFilesのダッシュボードに移動し、Upload Animationという右上のボタンから先ほど書き出したjsonファイルをアップロードします。

アップロードが完了すると、自動で編集画面に移動します。LottieFilesのブラウザ上でループ設定やアニメーションの速さの変更任意のカラーパレットから色変更もできます。すごい。

とはいえ今回は早さも色変更も必要なく、Aeのキーフレームでループするように設定してあるので、ここでは何も変更せずに後は書き出すだけです。

この書き出し方法がちょっと見つけづらい場所にあったのですが、

Share > Handoff & Embed

からWix Studioに必要なアセットリンクが書き出しできます。

今回はよりデータの軽いOptimized Lottie JSONのフォーマットで書き出しました。

dotLottieというフォーマットもあったのですが、そちらではWix Studioで上手く読み込めなかったので、JSON形式を選択しました。

最後にWix StudioでLottieのリンクを追加します。

埋め込み・SNS > Lottieアニメーション

をサイトに追加して、アニメーションURLの欄に先ほど発行したアセットリンクのURLを追加して実装完了です！

Wix Studioの公式ヘルプでも実装方法が紹介されているので、こちらも参考にしました。

注意点として、透過やドロップシャドウのエフェクトなど、一部の効果はAeからLottieへ上手く変換できない部分もあったので、今後は何が実装できて何が上手くいかないのかを探りつつ、上手く使いこなしていきたいなと思います。

最新記事