Lottie Android: добавьте цветовой оверлей к анимации

Я использую Lottie для Android, чтобы добавить анимацию в приложение. В этом приложении основной и акцентный цвет можно выбрать через настройки. Я использую анимацию с прозрачным фоном. Чтобы анимация соответствовала выбранным цветам, я бы хотел добавить наложение цветов к анимации, таким образом, у меня может быть один файл анимации, но я могу установить цвет программно.

У кого-нибудь есть идеи, как я могу манипулировать анимацией, добавляя цветное наложение?

Источник

7 ответов

Решение

Обновление 02/07/2018

Библиотека Lottie теперь обрабатывает изменение цвета по-разному.

Чтобы применить цветной фильтр, вам понадобятся три вещи:

  1. KeyPath (название контента, который вы хотите редактировать)
  2. LottieProperty (название объекта, который вы хотите редактировать)
  3. LottieValueCallback (обратный вызов, вызываемый при каждом повторном рендеринге анимации)

Чтобы следующий код использовал подстановочный знак в качестве ключевого пути и полностью окрашивал анимацию:

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.check_animation_view); 
animationView.addValueCallback(
      new KeyPath("**"),
      LottieProperty.COLOR_FILTER,
      new LottieStaticValueCallback<>(Color.RED));

Вы можете прочитать все об этом в официальной документации.

Старый ответ:

Вы можете добавить ColorFilter к LottieAnimationView или же LottieDrawable, Вот пример, чтобы изменить цвет вашей анимации на красный.

LottieAnimationView statusView = (LottieAnimationView) findViewById(R.id.check_animation_view); 
statusView.addColorFilter(new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP));
statusView.playAnimation();

Кроме того, также возможно изменить только один слой анимации. Следующий фрагмент кода демонстрирует это:

LottieAnimationView statusView = (LottieAnimationView) findViewById(R.id.check_animation_view); 
statusView.addColorFilterToLayer("layername", new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP));
statusView.playAnimation();

Название слоя можно найти в JSON анимации по тегу "nm".

Вот наглядное изображение результатов фрагментов кода:

Оригинал:

оригинал

Overlay:

оверлей

Наложение слоя:

Наложение слоя

Источник

Найден в источниках лотереи, основанных на основном ответе (спасибо @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);

Должно сработать.

Источник

Сочинить + Лотти

      @Composable
fun LottieAnimation(isPlaying: Boolean = false) {
    val composition by rememberLottieComposition(LottieCompositionSpec.Asset(LOTTIE_FILE_NAME))
    val progress by animateLottieCompositionAsState(
        composition,
        iterations = LottieConstants.IterateForever,
        isPlaying = isPlaying,
    )
    val dynamicProperties = rememberLottieDynamicProperties(
        rememberLottieDynamicProperty(
            property = LottieProperty.COLOR_FILTER,
            value = SimpleColorFilter(MaterialTheme.colors.primary.toArgb()),
            keyPath = arrayOf("**")
        ),
    )
    LottieAnimation(
        composition = composition,
        progress = { progress },
        dynamicProperties = dynamicProperties,
    )
}
Источник

Поскольку при настройке анимации вы передаете JSONObject, содержащий все данные чертежа, в Lottie, вы можете просто заменить некоторые значения цвета на нужные, прежде чем устанавливать их.

Если вы ищете цветовой ключ c вы, вероятно, найдете что-то вроде

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

где изменение этих значений с плавающей точкой в ​​этом JSONArray приведет к изменению цветов в анимации.

Конечно, я не говорю, что найти / заменить правильные значения будет слишком тривиально, но это должно, по крайней мере, указать вам в этом направлении.

В качестве дополнительного примечания: как только вы найдете его, вы можете установить значение в вашем активе в виде какого-нибудь хорошего заполнителя, такого как "k":[ BG_COLOR_REPLACEMENT_1 ] а затем при загрузке актива, просто запустите .replace("BG_COLOR_REPLACEMENT_1", "1,0.7,1,1"); на вашей строке перед созданием JSONObject и передачей его Lottie.

Источник

Я увидел ответ Guardanis и разработал безопасный способ найти цвет внутри JSON, который содержит анимацию Lottie:

Найдите - "c": {"a" - и вы найдете такие фрагменты для каждого слоя изображения: {"ty":"fl","c":{"a":0,"k":[0.4,0.4,0.4,0.4]}

Во фрагменте вы заметите, что "c" означает ЦВЕТ, "a" означает АЛЬФА, а "k" - это CMYK цвета слоя. Просто измените его на тот, который вы хотите.

Источник

В Kotlin (v1.4.32) Чтобы настроить полную анимацию на всех слоях, просто сделайте следующее:

      YOURS_LottieAnimationView.addValueCallback(
            KeyPath("**"),
            LottieProperty.COLOR_FILTER,
            { PorterDuffColorFilter(Color.parseColor("#b70101"), PorterDuff.Mode.SRC_ATOP) }
        )
Источник

Если у вашего JSON есть sc: поле, тогда вы сможете напрямую установить цвет Hex

подобно:

"sc": "#6664e7"
Источник
Другие вопросы по тегам