1

我使用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"
      );

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

4

2 回答 2

1

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

const animation = Lottie.loadAnimation({
  container: container.current,
  animationData: colorify(['#ef32d0', [50, 100, 200], '#fe0088'], SomeAnimation),
});
于 2020-07-30T09:27:35.387 回答
0

在 Lottie 中使形状颜色动态化的最简单方法是将 After Effects 中的“Stroke 1”或“Fill 1”重命名为“#somename”。导出后，您可以像这样在 CSS 中引用该形状：

#somename {
  stroke: red;
  /*or*/
  fill: red;
}
于 2021-11-05T12:53:24.787 回答