Динамическое изменение цвета в lottie json

Я сделал анимацию Lottie с помощью Lottie-web и теперь пытаюсь динамически изменить цвет, поэтому я использовал Lottie API(https://github.com/bodymovin/lottie-api). В этом я получил keyPath для изменения цвета, но не знаю, как изменить цвет объекта.

Это код для создания анимации объекта лотереи.

var animData = {
      container: animationContainer,
      renderer: "canvas",
      loop: true,
      autoplay: true,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid meet"
      },
      path: "https://labs.nearpod.com/bodymovin/demo/chameleon/chameleon2.json"
    };
    anim = lottie.loadAnimation(animData);

для изменения цвета Lottie JSON, который я использовал

animationAPI.getKeyPath(
        "#leaf_3,Contents,color_group,fill_prop,Color"
      );

Я получил путь к объекту, но теперь я не знаю, как изменить цвет, поэтому, пожалуйста, помогите мне, если кто-нибудь знает?


lottie bodymovin
person Jenisha Dalin    schedule 01.08.2019    source источник
comment
Привет @jenisha, тебе повезло? Я застрял в той же ситуации.   -  person Darshan Devrai    schedule 24.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать пакет lottie-colorify для изменения цветов анимации:

const animation = Lottie.loadAnimation({
  container: container.current,
  animationData: colorify(['#ef32d0', [50, 100, 200], '#fe0088'], SomeAnimation),
});
person Mikayel Saghyan    schedule 30.07.2020