Change color dynamically in lottie json

There are two primary ways to dynamically change colors in Lottie: using Lottie's provided API to modify the color properties of specific layers, or directly modifying the color values in the JSON file before the Lottie animation is loaded.

Method 1: Changing Colors Using API

Lottie's library (whether for Android, iOS, or Web) typically provides APIs to change properties within the animation, such as colors. For example, on Android, we can use LottieDrawable and KeyPath to target the layer we want to modify, then use LottieValueCallback to set the new color value.

Example code:

java
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.setAnimation("animation.json");
animationView.playAnimation();

// Create a KeyPath to target the layer we want to change
KeyPath keyPath = new KeyPath("LayerName", "ShapeLayer", "Fill");

// Set the new color value
LottieValueCallback<ColorFilter> colorFilterCallback = new LottieValueCallback<>(new SimpleColorFilter(Color.RED));

// Apply this color change
animationView.addValueCallback(keyPath, LottieProperty.COLOR_FILTER, colorFilterCallback);

In this example, we first target the layer named LayerName in the animation and its child layer ShapeLayer's fill. Then, we use LottieValueCallback to change the color of this layer to red.

Method 2: Modifying the JSON File

In some cases, we may need to modify colors before loading the animation. In this scenario, we can directly edit the Lottie JSON file.

Lottie animations typically define colors within the layers field of the JSON file, where each layer or shape may contain information about fills ("fill") and strokes ("st"). Colors are usually specified in RGBA format within these sections.

Example:

In the JSON file, locate the following section:

json
{
  "ty": "fl",
  "c": {"a": 0, "k": [1, 0, 0, 1]}, // RGBA Red
  "o": {"a": 0, "k": 100}           // 100% opacity
}

You can change the "k" value from [1, 0, 0, 1] (red) to [0, 0, 1, 1] (blue).

Summary

Both methods have their advantages and limitations. Using the API to change colors offers greater flexibility and dynamism, making it suitable for adjusting colors based on user interactions during runtime. Directly modifying the JSON file is ideal for scenarios where colors are predetermined before runtime, reducing computational overhead. The choice depends on the specific application context and requirements.