こんにちは、デザイナーの松本です。
今日はLottieアニメーションの書き出しで困った時のことをお話ししたいと思います。
アプリに組み込むアニメーションとしてLottieを使うのが便利ですが…
グラデーションがあるデザインのアニメーションを書き出してみたら、なんとカラーのグラデーションが白黒グラデーションになってしまった！！？ …そんな時の小技的な解決方法をご紹介します。
※この記事を書いたときのアプリとプラグインのバージョンは下記のとおりです。
・After Effects 23.2.0
・Bodymovin 5.9.0
Lottieとは？
LottieとはAirbnb社によるAndroid、iOS、Web用アニメーションライブラリです。
After Effectsで作成したアニメーションを拡張プラグイン「Bodymovin」を使用してjsonファイルで出力することで、モバイルアプリやWebにアニメーションを組み込むことができます。 ベクター画像と同様に大きくしても画像が粗くならず、動画やgifアニメよりも素材容量が軽いなど魅力的な点がいくつかありますが…
Lottieの説明や使い方については他にも解説がたくさんあるので今回は割愛します。
グラデーションのあるアニメーションを書き出してみる
Lottieはまだまだ開発途中であり、表示する環境によりAfter Effectsの機能を存分に使えないこともありますが、グラデーションは対応しています。
※サポートされている機能は公式ページでまとめられています Supported Features
ところが、書き出してみたら…なぜか白黒になってしまいました。
解決方法：「グラデーションの塗り」を英文字にする
通常、グラデーションを追加すると「グラデーションの塗り」という表記でコンテンツが追加されます。
この日本語で書かれたレイヤー名を英数字、例えば「gradation」などに変更します。（項目を選択してEnter キーで編集できます）
変更後はファイルを保存（Command＋s ・上書き保存）をしてから、いつもの通りにlottieを書き出します。
※時折、指定した色で書き出せていない事象がたまに発生していたので、念のためグラデーションを含むオブジェクトのレイヤー名も英数字にしておくとよさそうです。
これでグラデーションに色が戻りました！！
他に調べてみたところ、英語版を使っている方はグラデーションは問題なく使えているとの情報を見つけたので英語版を使用するという方法もあるようです。 しかし英語版に切り替えるのは大変そうで…取り急ぎの小技としてレイヤー名の変更が個人的には便利かと思い、覚え書きをブログに残しておきたいと思います。
今後Lottieが改善されてこの方法が不要になるまで、同じように困った状況になってしまった方のご参考になると幸いです！
