lottie - 在lottie json中动态更改颜色

Question

我使用Lottie-web制作了 Lottie 动画，现在尝试动态更改颜色，因此我使用了Lottie API ( https://github.com/bodymovin/lottie-api )。在那，我得到了改变颜色的 keyPath，但不知道如何改变对象的颜色。

这是创建lottie对象动画的代码

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

我得到了一个对象的路径，但现在我不知道如何改变颜色，所以如果有人知道，请帮助我？

标签： lottiebodymovin

Answer 1

您可以使用lottie-colorify包来更改动画颜色：

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