如何检查GIF动画是否完成

Question

我正在为一个朋友制作一个页面，当您点击链接时会出现一个动画gif。云彩会飞进来并且页面会重定向。当页面重定向时，云（另一个gif）会消散。由于缓存问题，我不得不为每个gif实例添加一个随机ID，从而减慢了我的网站速度。

目前，我已经设置了一个计时器来重定向我的页面，但是在网络较差的情况下，云彩gif经常被截断，使页面重定向后被云彩覆盖看起来非常尴尬。如果需要，我可以提供页面链接。

如何检查动画是否完成，然后再进行重定向或其他操作？

- Erik B

---

请澄清一下，您想要检查 GIF 动画是否已经完成了吗？@_@ - Wesley Brian Lachenal

可能是Determine GIF Animation Status?的重复问题。 - Wesley Brian Lachenal

或者这个 https://dev59.com/BXHYa4cB1Zd3GeqPJDsu - Wesley Brian Lachenal

这可能会对你有所帮助。https://dev59.com/F3M_5IYBdhLWcg3wjj-r - Khaleel

在JavaScript中无法访问动画.GIF的单个帧。但是请尝试上面链接中提供的解决方案。 - Khaleel

@BrianCoolidge 谢谢你提供的链接。 - Erik B

Answer 1

我不相信可以使用Javascript来确定gif何时完成。相反，您可以使用一种方法，即使用长静态图像，并将其滑动到仅显示其中一部分的div中。

例如，想象一个大小为10x10的div，内部有一个大小为100x10的图像。通过使用javascript移动图像，在div中一次只显示一个图像帧。

- Joel Sharin

---

我无法理解你的想法。 - Erik B

没事了...我明白了。这是一种更经典的GIF制作方式。因此，动画将是一个长条形的逐帧表示，滑过去创建动画效果？ - Erik B

没错。我加了更多的解释。 - Joel Sharin

我一定会尝试一下。感谢您的详细说明。 - Erik B

Answer 2

我有点晚了，但现在我也遇到了类似的问题。

一个解决方案是如果你知道 .gif 文件的长度，可以创建一个 setTimeout。

例如，我在 Adobe Photoshop 中创建了一个长达 7 秒的 .gif 文件，并将其添加到我的 React 应用程序的公共文件夹中。 当我创建包含 gif 的组件时，我还使用 setTimeout() 在 7 秒后运行一个函数。

大致上看起来像这样：

const [showGIFValue, showGIFUpdate] = useState("file.gif");
  return (<div>
    <img id="uniqueID" src={showGIFValue} alt="alt text"/>
    {setTimeout(()=>{
      //change showGIFValue from the .gif file to a .png file
      showGIFUpdate("file.png");
    }, (7000))}
  </div>);

所以针对您的问题，您需要查看云彩完成悬停的时间，因此请查看您的文件并查看 gif 持续多少毫秒，并创建一个 setTimeout()，在该时间后运行您的函数。

- user12246115