lottie中的动画使我的react应用程序崩溃

Question

我正在React中开发一个应用程序，该项目是用Vite创建的。

我试图用Lottie实现一个动画，但我成功了，当我更改动画所在的页面(我的应用程序有4个页面(并返回该页面时，我的网站崩溃了。

我不知道问题出在哪里，因为这是我第一次在项目中使用Lottie，欢迎任何帮助。

下面是一个包含动画的组件示例：

import { useLottie } from "lottie-react";
import devAnimationData from "../../assets/lottie/dev-animation.json";
export const Developer = () => {
const styles = {
height: 500,
width: 500
};
const defaultOptions = {
loop: true,
autoplay: true,
animationData: devAnimationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
};
const { View } = useLottie(defaultOptions, styles);
return View;
};

Answer 1

我遇到了同样的问题，在网上做了一些研究后，我在Github中遇到了这个问题。

对于某些动画，您可能会两次加载同一动画对象，这会导致嵌套中继器。

我遵循了bodymovin评论中给出的说明，这似乎为我解决了问题。

与其简单地像你那样设置animationData，我会做以下操作：

animationData: JSON.parse(JSON.stringify(devAnimationData))

如果这能解决你的问题，请告诉我。

我为解决我的问题而引用的评论：

我猜animationData正在某个地方导入，并在每次加载动画时传递到此组件。如果你通过了同样的考试animationData多次传递同一个对象，并且Lottie每次加载新对象时都会使用并修改该对象动画中继器，因为它们的工作方式，创建了这种类型嵌套元素和内存上的尖峰。你可能应该通过通过执行JSON.parse(JSON.stringfy(animationData))它会很好用的