Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a color overlay to an animation in Lottie?

I'm using Lottie for Android to add some animations in an app. In this app the primary and accent color can be chosen via the settings. I'm using an animation with a transparent background. To make the animation fit the chosen colors I'd like to add a color overlay to the animation, this way I can have one animation file but I can set the color programmatically.

Does anyone have an idea how I can manipulate the animation by adding a color overlay?

like image 527
SolveSoul Avatar asked Apr 12 '17 17:04

SolveSoul


People also ask

How do you customize Lottie animation?

Step 1: Go to Lottiefiles.com and log in so you can download and edit the Lottie animations. Step 2: Browse and search for the animation that matches your needs. Then click on Edit Layer Colors button. Step 3: Navigate to Lottie Editor if you already have a JSON you can upload it from here.

How do I change the background color in Lottie JSON?

Above your chosen Lottie you'll see the 'Convert to GIF' button which will take you to the Lottie to GIF converter. Once at the converter, you can select the background color you want for your GIF. Click 'Convert to GIF' and you'll have your GIF with that solid background color.

Can LottieFiles have transparent background?

All replies. You can use any lottie animation. If your lottie file have transparent background then it will shows transparent,You dont need to change json file.


2 Answers

To apply a color filter you'll need three things as of now:

  1. KeyPath (name of content you wish to edit)
  2. LottieProperty (name of property you wish to edit)
  3. LottieValueCallback (callback called for every animation re-render)

The layer name can be found in the JSON of the animation by the tag 'nm'.

Add a full color overlay:

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);
            }
        }
);

Add a single layer color overlay (layer called "checkmark"):

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);
            }
        }
);

Remove any color overlays:

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;
            }
        }
);

You can read all about it in the official documentation.

You can also check out this sample repository

Here's a visual on the results of the code snippets:

Example

like image 55
SolveSoul Avatar answered Sep 19 '22 14:09

SolveSoul


Found in sources of lottie, based on main answer (thanks @SolveSoul ).

Java

First, get your color, for example:

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

Then set color filter like this:

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

Kotlin

First, get your color, for example:

val yourColor = ContextCompat.getColor(context, R.color.colorPrimary)

Then set color filter like this:

val filter = SimpleColorFilter(yourColor)
val keyPath = KeyPath("**")
val callback: LottieValueCallback<ColorFilter> = LottieValueCallback(filter)

animationView.addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback)

Kotlin extension

fun LottieAnimationView.changeLayersColor(
    @ColorRes colorRes: Int
) {
    val color = ContextCompat.getColor(context, colorRes)
    val filter = SimpleColorFilter(color)
    val keyPath = KeyPath("**")
    val callback: LottieValueCallback<ColorFilter> = LottieValueCallback(filter)

    addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback)
}

like image 23
Evgen Avatar answered Sep 19 '22 14:09

Evgen