最近,我们为网站制作了一些GIF动画。动画之一是 map 上的标记,它在空中“跳跃”。我们的想法是让标记仅在鼠标滑过时跳一次。换句话说:它只应该播放一次,并且在悬停时不会陷入无限循环。
我首先阅读了这篇文章:Animating a gif on hover。我使用代码在悬停时启动动画,并在鼠标移出时将其替换为静态图像。
但这并不能使我接近想要的东西。使用此脚本,它可以一直循环播放,这是逻辑,但正是我们不想要的。另外,当您将鼠标移出时,我们希望GIF继续动画直到完成,而不是立即停止。最后但并非最不重要的一点是:悬停时,将鼠标移出,然后在动画继续播放时立即再次悬停,在播放动画时不应重新启动。
据我所了解,以及当我创建动画时我没有意识到的事情,使用jQuery控制GIF动画非常困难。
我唯一能想到的就是处理动画的时间/持续时间。例如。如果动画花费3秒钟,那么我们可以将Gover静态图片(悬停时)替换为该时间段。如果我们在img标签的data属性中传递持续时间,我们甚至可以为所有GIF编写通用脚本。但这将意味着编写大量代码,这对我而言似乎不是最简单的方法。
有谁想到实现我们想要的更简单方法的想法?我很期待听到您对此的看法。
最佳答案
创建gif图像时,可以创建它,使其仅循环一次。
因此,要解决此问题,请首先加载文件的静态版本。当您将鼠标悬停在图像上时,请将其更改为gif图像,并保持这种方式,这样它就可以完成其一次性动画。
我不会用任何时间。确切的时间难以预测,因为某些计算机速度较慢,并且还应考虑加载时间。
因此,解决方案:
src
元素,则更改img
属性。