我想知道它是否有可能有一个GIF动画播放,然后一旦gif到达它的动画结束就通过
jquery发射一个事件.一旦它这样做,然后它循环回到队列的开头,然后再次播放gif然后事件.
如果你看看我的jfiddle,我做了一个男人打字的小gif.然后当他抬起头来想一想,我希望那个“思想”的div能够改变别的东西.我非常想让他头顶的那个词同步,当他的脑袋突然出现时就会改变.
<div id="thought">
Amazing Idea
</div>
<div id="firstgif">
<img src="http://i.imgur.com/pcc4DP5.gif"/>
</div>
解决方法
我对此的回答类似于类似的stackoverflow问题上的
this answer和
this one.
如果您有一个具有设定帧数且没有循环的GIF,您可以使用javascript使用setTimeout来触发您的事件.尽管如此,它很有可能因为你正在玩一个猜谜游戏而失去同步,因为GIF的渲染是否会以与每次javascript执行相同的速度播放.
更安全的选项是我使用sprite map模拟动画的方式所说的其他答案.这是通过使用javascript来更改元素中图像的背景位置来实现的.通过这种方式,您可以更好地控制动画的动画效果,更好地控制javascript事件和更好的计时,因为它与javascript执行速度相关/它只会在您告诉它的动画帧中.
