Lottie Android: agrega superposición de color a la animación

Solución:

Para aplicar un filtro de color, necesitará tres cosas a partir de ahora:

1. KeyPath (nombre del contenido que desea editar)
2. LottieProperty (nombre de la propiedad que desea editar)
3. LottieValueCallback (devolución de llamada para cada re-renderizado de la animación)

El nombre de la capa se puede encontrar en el JSON de la animación con la etiqueta ‘nm’.

Agregue una superposición a todo color:

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

Agregue una superposición de color de una sola capa (capa llamada “marca de verificación”):

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

Elimine las superposiciones de color:

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

Puedes leerlo todo en la documentación oficial.

También puede consultar este repositorio de muestra

Aquí hay una imagen de los resultados de los fragmentos de código:

Encontrado en fuentes de lottie, según la respuesta principal (gracias @SolveSoul ).

Java

Primero, obtenga su color, por ejemplo:

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

Luego configure el filtro de color como este:

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

Kotlin

Primero, obtenga su color, por ejemplo:

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

Luego configure el filtro de color como este:

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

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

Extensión de Kotlin

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

Dado que está pasando un JSONObject que contiene todos los datos del dibujo a Lottie al configurar la animación, puede reemplazar algunos de los valores de color con los que desee antes de configurarlo.

Si busca la clave de color c probablemente encuentres algo como

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


donde cambiar esos valores flotantes en ese JSONArray cambiaría los colores en la animación.

Por supuesto, no estoy diciendo que sea demasiado trivial encontrar / reemplazar los valores correctos, pero esto al menos debería apuntarle en esa dirección.

Como nota al margen: una vez que lo encuentre, puede establecer el valor de su activo en algún tipo de marcador de posición agradable como "k":[ BG_COLOR_REPLACEMENT_1 ] y luego, cuando cargue el activo, simplemente ejecute .replace("BG_COLOR_REPLACEMENT_1", "1,0.7,1,1"); en su String antes de crear el JSONObject y pasarlo a Lottie.

---

---

Utiliza Nuestro Buscador