こんにちは。クライマーデザイナーのNです。
今回はLottieでアニメーションを作ろうと思った時につまずいた話をしようと思います。

Lottieとは

拡張プラグインBodymovinを使用することで、Adobe After Effectsで作成したアニメーションをjsonとしてエクスポートできます。

それによって、モバイルおよびWeb上でアニメーションをレンダリングできます。

Lottieの大きな魅力は

• アニメーションの実装が手軽になる
• 動画やGIFアニメーションに比べてファイルサイズが軽量化できる
• SVGを使っているので拡大縮小も自由自在

という点です。

Lottieでアニメーションをつくる流れ

1. Illustratorの素材を用意
2. After Effectsで動きをつける
3. Bodymovinで書き出し

という流れになります。
この流れで私がつまずいたのが最後の書き出しができない。。。

Lottieは簡単なアニメーションを動かすものなので複雑な動きはできない

例えば

• マスクの使用
• 画像の使用
• グラデーションの使用
• 透過グラデーション
• エフェクト
• 加算加工

などなどです。

ただ今回は上記に当てはまってもいないのに書き出しができませんでした。
もしそういう方がいればAfter Effectsの環境設定を確認してみてください。

After Effectsの環境設定の見直し手順

1. メニューバーのAfter Effectsを選択
2. 環境設定を選択
3. スクリプトとエクスプレッションを選択
4. スクリプトによるファイルへの書き込みとネットワークの許可にチェックを入れる

これで無事書き出しに成功しました！

単調ですがアイディア次第でかわいいアニメーションが作れるLottie
そのうち具体的な作り方を備忘録として残そうと思います。