web-dev-qa-db-ja.com

Lottie Android：アニメーションにカラーオーバーレイを追加

Lottie for Android を使用してアプリにアニメーションを追加しています。このアプリでは、プライマリとアクセントの色は設定を介して選択できます。背景が透明なアニメーションを使用しています。アニメーションを選択した色に合わせるために、アニメーションにカラーオーバーレイを追加します。この方法で、1つのアニメーションファイルを作成できますが、プログラムで色を設定できます。

カラーオーバーレイを追加してアニメーションを操作する方法を知っている人はいますか？

androidanimationlottie-android
8
SolveSoul

カラーフィルターを適用するには、現時点で3つのものが必要です。

  1. KeyPath（編集するコンテンツの名前）
  2. LottieProperty（編集するプロパティの名前）
  3. LottieValueCallback（アニメーションの再レンダリングごとにコールバックが呼び出されます）

レイヤー名は、アニメーションのJSONでタグ「nm」によって見つけることができます。

フルカラーオーバーレイを追加します。

LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(
        new KeyPath("**"),
        LottieProperty.COLOR_FILTER,
        new SimpleLottieValueCallback<ColorFilter>() {
            @Override
            public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
                return new PorterDuffColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP);
            }
        }
);

単一レイヤーのカラーオーバーレイ（「チェックマーク」と呼ばれるレイヤー）を追加します。

LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(
        new KeyPath("checkmark", "**"),
        LottieProperty.COLOR_FILTER,
        new SimpleLottieValueCallback<ColorFilter>() {
            @Override
            public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
                return new PorterDuffColorFilter(Color.CYAN, PorterDuff.Mode.SRC_ATOP);
            }
        }
);

カラーオーバーレイを削除します。

LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.addValueCallback(new KeyPath("**"), LottieProperty.COLOR_FILTER,
        new SimpleLottieValueCallback<ColorFilter>() {
            @Override
            public ColorFilter getValue(LottieFrameInfo<ColorFilter> frameInfo) {
                return null;
            }
        }
);

あなたはそれについてのすべてを 公式ドキュメント で読むことができます。

これもチェックしてください サンプルリポジトリ

コードスニペットの結果を視覚的に示します。

Example

23
SolveSoul

主な回答に基づいて、lottieのソースで見つかりました（@ SolveSoulに感謝します）。

まず、色を取得します。次に例を示します。

int yourColor = ContextCompat.getColor(getContext(),R.color.colorPrimary);

次に、次のようにカラーフィルターを設定します。

SimpleColorFilter filter = new SimpleColorFilter(yourColor);
KeyPath keyPath = new KeyPath("**");
LottieValueCallback<ColorFilter> callback = new LottieValueCallback<ColorFilter>(filter);
animationView.addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback);

動作するはずです。

5
Evgen

アニメーションを設定するときに、すべての描画データを含むJSONObjectをLottieに渡すので、設定する前に、いくつかの色の値を目的の値に置き換えることができます。

カラーキーcを探すと、おそらく次のようなものが見つかります。

_...,"c":{"k":[1,0.7,0,1]},"fillEnabled":true,..._

そのJSONArrayでこれらのfloat値を変更すると、アニメーションの色が変更されます。

確かに、正しい値を見つけて置き換えるのが簡単すぎると言っているわけではありませんが、少なくともその方向を示しているはずです。

補足として、アセットの値を_"k":[ BG_COLOR_REPLACEMENT_1 ]_のような素敵なプレースホルダーに設定し、アセットを読み込むときに、前に文字列で.replace("BG_COLOR_REPLACEMENT_1", "1,0.7,1,1");を実行するだけです。 JSONObjectを作成し、それをLottieに渡します。

3
Cruceo

Guardanisが答えるのを見て、Lottieアニメーションを含むJSON内の色を見つける安全な方法を詳しく説明しました。

--"c"：{"a"-を検索すると、画像の各レイヤーに次のようなフラグメントが見つかります：{"ty"： "fl"、 "c"：{"a" ：0、 "k"：[0.4,0.4,0.4,0.4]}

フラグメントでは、「c」は色を意味し、「a」はアルファを意味し、「k」はレイヤーの色のCMYKであることがわかります。必要なものに変更するだけです。

1
Roney Sampaio

JSONにsc:フィールドがある場合は、16進色を直接設定できるはずです。

お気に入り：

"sc": "#6664e7"
0
ahbou