Lottieでグラデーションが白黒になる問題の解決方法

Lottieとは

Lottieはairbnbが提供するアニメーションライブラリです。

Lottieを使うと、After Effectsで作成したアニメーションをウェブやアプリで描画する事ができます。

このライブラリを知った当時は、「ウェブでできる事が広がる！」と相当ワクワクしたことを覚えています。

今回は、Lottieの詳しい使い方は割愛しますが、Lottieのウェブでの使い方の流れとしては、次の通りです。

1. After Effectsでアニメーションを作成
2. After Effectsのプラグイン "bodymovin" や "LottieFiles" で、Lottie用のJSONファイルを書き出す
3. ウェブサイトにLottieを読み込み、JSONファイルをアニメーションに描画

公式サイト

Lottieやプラグインの公式サイトはこちらです

• Lottie
• LottieFiles - Download Free Lottie Animations, Integrations & Plugins
• Bodymovin - Lottie - aescripts + aeplugins - aescripts.com
• airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

グラデーションが白黒になる問題

After Effectsで作成したアニメーションをLottieで使用するJSONファイルを書き出すには、専用のプラグイン"bodymovin" や "LottieFiles"が必要です。

昔は"bodymovin"しかなかったのですが、最近"LottieFiles"というプラグイン・アニメーションプラットフォームも登場しました。

いずれにしても、After Effectsのアニメーションにグラデーションが存在する場合、JSONに書き出す時に、それが白黒になってしまうという問題があります。

割と昔から議論されていた問題のため、現在は既に解決しているかもしれないのですが、備忘もかねて解決方法を記載します。

解決方法

01. 英語版のAfter Effectsを使用する

多くの場合、この方法で解決するようです。

既に他言語のAfter Effectsで作成したアニメーションの場合は、英語版のAfter Effectsで読み込み、保存しなおすと直る場合があります。

02. After Effectsのレイヤー名を英語にする

この方法も解決につながる事が多いと言われています。

ちなみに、英語版のAfter Effectsを使えば、レイヤー名が英語ではなくても問題は発生しないと思います。

03. OSの言語設定を英語にする(Windowsのみ)

私の場合は、英語版のAfter Effectsを使用しても、白黒問題は解決しなかったのですが、この方法で解決しました。

それが「Unicode 対応ではないプログラムの言語(Current language for non-Unicode programs)」という設定です。

この設定はコントロールパネルからアクセスします。

手順は次の通りです。

1. コントロールパネルを開く
2. "日付、時刻、または数値の形式の変更(Region: Change date, time, or number of formats)"を開く
3. "管理(Administrative)"のタブの"Unicode 対応ではないプログラムの言語(Current language for non-Unicode programs)"を"英語(English(United States))"に変更する

こちらの画像も参考にしてみてください。

---

その他の方法

JSONファイルを直接編集したり、After Effectsのプロジェクトで色設定を変えるなど、他にも方法があり、試したのですが、解決しませんでした。

個人的には、今回紹介した3つのどれかで解決すると思います。

---