Question

我使用 Lottie-web 制作了Lottie动画，现在尝试动态更改颜色，所以我使用了 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"
      );

我有物体的路径，但是现在我不知道如何改变颜色，所以如果有人知道，请帮我吗？

Answer 1

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

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

在Lottie JSON中动态更改颜色

1 个答案: