如何同步播放多个 GIF？ （反应）

Question

我正在构建一个应用程序，该应用程序使用覆盖的 div 和 CSS 背景精灵（即 gif）来显示可自定义的头像。目前，我正在使用内联组件样式设置背景图像，如下所示：

<div id="head" style={{backgroundImage: `url(${headSheet})`}}/>

<div id="hat" style={{backgroundImage: `url(${hatSheet})`}}/>

这在大多数情况下都有效，但有时在加载页面时，gif 不会同时启动，因此动画不会同步。我已经尝试了这些解决方案：

• Load and display multiple animated gifs at the same time (synchronised) with Javascript

• How synchronize more gif pictures?

但它们对我不起作用。它们也相当老了，所以希望有一个使用 React 的更现代的解决方案。

Answer 1

真的，您无法始终如一地使用动画 gif 或一组 gif 来做您想做的事情。

您可能应该将每个帧分成单独的 gif/png（您可以在 Combine this with a canvas，通过JS控制交换。查看window.requestAnimationFrame 以及您的控制流。

您应该将它与 useEffect 挂钩结合使用来注册/取消注册您的动画转换。您可能希望直接（useRef）操作画布元素，而不是让 React 处理（重新）渲染。