Lottieとは
スケーラブルなアニメーションを作成できるサービスで、さまざまなプラットフォームに対応しています。 特徴として、GIFやMP4などと比べファイルサイズが小さいことや、インタラクティブに開発ができることなどがWebSiteで説明されています。
なぜLottie
先日リリースされたMapboxDashSDKに搭載されたMapGPTと呼ばれるAIアバター機能では、開発者が独自のアバターを搭載できます。現時点で対応しているアバターアニメーションの形式としてこのLottieで作成されたものに対応しています。
やってみる
LottieアカウントはGoogleアカウントなど連携アカウントから簡単に可能です。（アカウント作成は無料）
サインイン後のポップアップで表示されますが、簡単なチュートリアル動画が提供されていて、おそらくデザインや開発に慣れた方ならこのビデオで大まかにできることは把握できるように思います。
DashboardからFirst Projectを選択すると、いくつかのオプションが表示されますが、Upload an animation以外はサンプルから作成するもののようです。
Upload an animationを選んでみます。すると、Lottie JSON(Lottie形式のファイル）のUpload画面になりますが、まだ初めてなので、この形式のファイルを持っていません。そこで、Convert video and image sequence to LottieのTry it outを開いてみます。
GIFやMP4など馴染みのある形式が使えることがわかります。
※サイズ制限があり10MB/eachのようです。
試しに、アバターアニメーション用のPNGファイルセットをUploadしてみます。下記のようなPNGファイルセットを準備して、ZipでUploadします。
数秒でアニメーションが出来上がりました。
これで、Lottie上でEditやJSON形式ファイルのダウンロードなどができるようになります。
MP4やWebM、MOVなどにも対応しているようです。
サンプル
補足
- Lottieの多くの便利機能は有料版で提供されている
- 無料アカウントでも簡単なアニメーションは作成できる
- MP4やGIFからUploadしたイメージだと、Editできる範囲が限られている
- Upload imageより、独自にAnimation作成する方がデザイン性を追求できる
最後に
こちらで作成したLottieアニメーションが現在 MapGPTアバターが現時点で対応しているものになります。開発者やデザイナーが独自のアバターを作成してナビゲーションに搭載することができます。
今後他のライブラリにも対応を広げていく予定です。
MapGPTとDashSDKについてはこちらをご参照ください。
Discussion