javascript - 如何控制 gif？

Question

事情是这样的，我有三个 gif，每个都在做一个动画的一部分

<img src="images/carEnters.gif" id="enter">
<img src="images/carLeaves.gif" id="exit">
<img src="images/tireTracksDissappear.gif" id="delete">

这些 gif 将在 scrollTop 达到特定值时显示，也就是当它们将显示在其中的 div 将在视口(viewport)中时。但是，我只希望动画发生一次，这意味着我不希望它重复。然后，如果 usar 向下滚动，我想要播放汽车离开的 gif(也是一次)，完成后，我想要播放最后一个 gif。我不知道这是否可能，以控制它们从 scrollTop 开始的那一刻并在特定时间暂停动画。我尝试使用 freezeframe但它对我不起作用。

我们的想法是创建当您滚动到该部分时汽车到达的效果，当您离开时汽车也离开。任何想法或建议将不胜感激

更新

我不能让它只循环一次，因为我的想法是，如果用户向后滚动，汽车应该能够再次进入(或重新启动动画，我不知道是否可以只用一个循环 gif)。主要问题是...如何检测第一个 gif 何时结束以及如何激活第二个...如何链接它们以使其看起来像一个动画

Answer 1

您可以制作一个不循环但只播放一次的 gif:GIMP Tutorial .任何好的图像包(免费或其他)都应该能够做到这一点。也许您可以打开现有的 gif 图像并在不循环的情况下重新保存它们？