javascript - 通过快速切换 DOM 中的 SVG 元素来创建 "GIF"的性能问题

Question

我想知道如果我通过在多个 SVG 元素之间快速循环来创建类似 GIF 的效果，是否应该关注性能/任何内存问题？
为了解决问题并发送至maintain accurate transparency我没有使用实际的 GIF 来实现这种效果。基本上在 React 中，我创建了一系列 SVG，例如

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

为了制作动画，我循环播放它们，在给定时间只渲染一个。
我想知道是否最好将所有 SVG 元素都放在 DOM 中并只修改每个元素的不透明度？并且为了将来引用，我如何自己对这个性能进行基准测试？

Answer 1

我鼓励你检查这个使用 'react-move'(动画库)和 useTick( react 钩子(Hook))https://dev.to/tornord/how-to-create-animated-svg-using-react-296l 动画 svgs 的例子. react 功能组件中有一个 useTick Hook 。您可以使用它来模仿类似 GIF 的效果。请使用 useTick https://reactpixi.org/hooks#usetick 查看此示例
就性能而言:我认为循环遍历 SVG 数组会更好，因为如果您使用不透明度，则意味着您必须在渲染页面时预加载所有 SVG。如果您有过多的 SVG 元素，这些元素会在页面加载时在客户端消耗资源。