时间戳

首页 > 解决方案 > 通过快速切换 DOM 中的 SVG 元素来创建“GIF”的性能问题

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

问题描述

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

为了分辨率和保持准确的透明度，我没有使用实际的 GIF 来实现这种效果。基本上在 React 中，我创建了一系列 SVG，例如

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

为了制作动画，我循环播放它们，在给定时间只渲染一个。

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

标签： javascriptreactjs

解决方案

我鼓励你检查这个使用'react-move'（动画库）和useTick（反应钩子）制作动画svgs的例子https://dev.to/tornord/how-to-create-animated-svg-using-react- 296升。react 功能组件中有一个 useTick 挂钩。您可以使用它来模仿类似 GIF 的效果。请使用 useTick https://reactpixi.org/hooks#usetick查看此示例

就性能而言：我认为循环遍历 SVG 数组会更好，因为如果您使用不透明度，则意味着您必须在渲染页面时预加载所有 SVG。如果您有过多的 SVG 元素，这些元素会在页面加载时在客户端消耗资源。

推荐阅读