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

Posted 2023-03-25

【中文标题】如何同步播放多个 GIF？ （反应）

【英文标题】：How can I play multiple gifs in sync? (Reactjs)

【发布时间】：2021-10-17 02:14:04

【问题描述】：

我正在构建一个应用程序，该应用程序使用覆盖的 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 的更现代的解决方案。

【参考方案1】：

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

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

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