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

Question

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

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

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

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

• 使用Javascript同时（同步）加载并显示多个动画GIF

• 如何同步更多gif图片？

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

Answer 1

真的，你无法通过一个或一组 gif 动画来一致地执行你想要的操作。

您可能应该将每个帧分解为单独的 gif/png （您可以在 <= 256 color palette with alpha transparency, so may be a better option). 将其与画布组合中执行透明 png，并通过 JS 控制交换。还要查看 window.requestAnimationFrame 以了解您的控制流程。

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

Answer 2

这是一个示例，等待页面上的所有图像加载，然后循环遍历每个图像并重置其

src

，这会导致浏览器重新启动动画。

Promise.all(Array.from(document.images).filter(img => !img.complete).map(img => new Promise(resolve => { img.onload = img.onerror = resolve; }))).then(() => {
    console.log('images finished loading');
    images = document.getElementsByTagName("img");
    for (image of images) {
        image.src = image.getAttribute("src");
    }
});

来源：https://stackoverflow.com/a/60949881/7465444https://stackoverflow.com/a/64017942/7465444