梅雨に入ったと思ったらあっという間に真夏日になり、近くの公園ではセミの声がするようになりました。
とらラボで新規開発チームに所属しているgodanです。

本記事は2023 夏のブログ連載企画 19日目の記事です。
昨日7月18日は、後藤さんの「画像から取得したImageData オブジェクトで花火を描画してみた」でした。画像から力技で花火のように見せる発想は思いつかなかったので勉強になりました……!

今日は、華やかさが足らない個人サイトにいい方法が無いか探していたときに見つけたLottie(ロッティー)というライブラリの紹介記事になります。

Lottieとは

airbnbが作ったライブラリでWebを始めとして様々なプラットフォーム上で動作するベクターアニメーションを簡単に作成、導入することが出来ます。
アニメーションは公式エディタやAdobe AfterEffectsなどで作成することができます。作成されたアニメーションはJSONファイルに書き出されて簡単にアプリやサイトに導入できるところがこのライブラリの最大の魅力です。 airbnb.design

今回はAdobe AfterEffectsでアニメーションを作成してReactアプリケーション上に表示するとこまでをご紹介します。

素材を用意する

今回はとらラボで公開している楽しそうなDenoくんを題材に作成してみます。

yumenosora.co.jp

ラボで公開しているDenoくんはpngのラスターファイルのため、このままではLottieを使用することが出来ません。

エンジニア向けのブログ記事なので詳細は省きますがAdobe Illustratorでベクター化していきます。

Adobe Illustratorでレイヤー分け

Adobe Illustratorは画像やベクターを取り扱う事ができる画像編集ソフトです。
その中にある画像をベクター化する機能を使用します。合わせて、りんごや音符などアニメーションにしたい要素ごとにレイヤーを分けていきます。

Adobe After Effectsでアニメーションを組む

静止画素材が出来たら次にアニメーションを設定します。先程作ったIllustratorファイルをレイヤーごとに読み込みます。
Lottieでは一部のAfter Effectsの機能を使った動画は変換出来ません。作る際は音声素材や画像素材は使用せずに出来るだけベクタ素材やシェイプレイヤーを使用しましょう。またエフェクトも使用できません。動きなどは標準トランスフォームで設定できる範囲でつける必要があります。

読み込んだらIllustrator素材をベクター素材に変換してアンカーポイントなどを設定していきます。

最後にタイムラインに対してキーフレームを設定して4秒のアニメーションを作成しました。

アニメーションファイルを書き出す

アニメーションが完成したら早速Lottieへ書き出していきます。まずはAfterEffectsのプラグインを導入します。プラグインは公式から提供されており、下記URLから入手出来ます。

lottiefiles.com

導入後はAfterEffectsの環境設定を変更します。LottieプラグインはLottieFilesへの連携のためネットワークアクセスが必要です。環境設定から スクリプトとエクスプレッション　> アプリケーションのスクリプト　> スクリプトによるファイルへの書き込みとネットワークアクセスへの許可　にチェックして保存しましょう。変更後はAfterEffectsを再起動しておくことをおすすめします。

導入後にメニューからウィンドウ > エクスプレッション> Lottie を選択するとLottieのウィンドウが現れます。書き出したいコンポーネントを選択するとそのコンポーネントが書き出し可能かを自動で判定してくれます。

Lottieが対応していないエフェクトや複合パスなどを使用するとここで警告が出ます。AfterEffectsで作成する際は仕様をよく確認してこまめに出力エラーが出てないことを確認しましょう。今回終盤で確認したためエラーの原因調査が大変でした……

準備が出来たらUploadを押します。押すとLottieファイルを管理するウェブサービスであるLottieFilesにアップされます。アップしたものは公開しない限り自分しか使用できません。アップが完了するとJSONファイルをダウンロードすることが出来ます。

Reactで呼び出してみよう

書き出したLottie JSONファイルを早速Reactで表示させてみましょう！まずは再生するのに必要なパッケージをインストールします。
パッケージは下記コマンドで導入することが出来ます。

$ npm install --save lottie-react

今回は最低限にアニメーションを再生するだけのコンポーネントを作成します。

"use client";
import Lottie from "lottie-react";
// 書き出したjsonを読み込む
import denoAnimation from "./deno.json";

const Deno = () => {
    return <Lottie animationData={denoAnimation} />;
};

export default Deno;