Javascript 创建一个；GIF"；通过快速切换DOM中的SVG元素

我想知道如果我通过在多个SVG元素之间快速循环来创建类似GIF的效果，是否应该关注性能/内存问题

为了解决这个问题，我没有使用实际的GIF。基本上在React中，我创建了一系列SVG，如

const svg1 = () => { return <svg>...</svg> };
const svg2 = () => { return <svg>...</svg> };
...etc.

const svg1=（）=>{return…}；
常量svg2=（）=>{return…}；
等

为了制作动画，我在它们之间循环，每次只渲染一个

---

我想知道是否最好将所有SVG元素都放在DOM中，只修改每个元素的不透明度？另外，为了将来的参考，我如何自己对这一性能进行基准测试？

我鼓励您检查使用“react move”（动画库）和useTick（react hook）为SVG制作动画的示例。react功能组件中有一个可用的useTick挂钩。您可以使用它来模拟类似GIF的效果。请使用useTick查看此示例

---

至于性能：我认为最好是循环遍历SVG数组，因为如果使用不透明度，则意味着您必须在呈现页面时预加载所有SVG。如果您有过多的SVG元素，在加载页面时会在客户端消耗资源。

我不确定哪种情况最好，但您可以在浏览器中使用开发人员工具对性能进行基准测试。有用于

性能

和

内存

的选项卡。启动捕获将允许您查看高峰使用期间负责的操作。Chrome dev ToolsThank的示例文档为资源提供了支持，但是这些示例似乎为预先存在的SVG组件制作了动画。我想做的有点像“卡通”，每一帧都是不同的SVG，我想在每一帧之间闪烁。所以我会记住你的第二点，尝试SVG数组