Lottie Android: add color overlay to animation
I am using Lottie for Android to add animation to my application. In this application, the main and accent color can be selected through the settings. I am using animation with transparent background. To make the animation match the selected colors, I would like to add a color overlay to the animation so that I have one animation file, but I can set the color programmatically.
Anyone have any ideas how I can manipulate the animation by adding a color overlay?
source to share
To apply a color filter, you need three things:
- KeyPath (the name of the content you want to edit)
- LottieProperty (the name of the object you want to edit)
- LottieValueCallback (callback called every time the animation re-renders)
The layer name can be found in the JSON animation by the "nm" tag.
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 (a layer called the 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 all 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 is a visual representation of the results of the code snippets:
source to share
Found in lottery sources based on the main answer (thanks @ SolveSoul ).
First get your color like:
int yourColor = ContextCompat.getColor(getContext(),R.color.colorPrimary);
Then install the color filter as follows:
SimpleColorFilter filter = new SimpleColorFilter(yourColor);
KeyPath keyPath = new KeyPath("**");
LottieValueCallback<ColorFilter> callback = new LottieValueCallback<ColorFilter>(filter);
animationView.addValueCallback(keyPath, LottieProperty.COLOR_FILTER, callback);
It should work.
source to share
Since you are passing a JSONObject containing all of the drawing data to Lottie when setting up your animation, you can simply replace some of the color values with the ones you want before setting it.
If you are looking for a colored key c
, you will probably find something like
...,"c":{"k":[1,0.7,0,1]},"fillEnabled":true,...
where changing these float values is that the JSONArray will change colors in the animation.
Of course, I'm not saying that it would be too trivial to find / replace the correct values, but that should at least point you in that direction.
As a side note: once you find it, you can set a value in your asset for some pretty placeholder like "k":[ BG_COLOR_REPLACEMENT_1 ]
, and then when the asset loads, just run .replace("BG_COLOR_REPLACEMENT_1", "1,0.7,1,1");
in your line before creating the JSONObject and pass it to Lottie.
source to share
I saw Gardanis' answer and came up with a safe way to find a color inside a JSON that contains a Lottie animation:
Search - "c": {"a" - and you will find such fragments for each layer of your image: {"ty": "fl", "c": {"a": 0, "K": [0.4,0.4 , 0.4,0.4]}
In the snippet, you will notice that "c" stands for COLOR, "a" stands for ALPHA, and "k" stands for the CMYK color of the layer. Just change it to the one you want.
source to share