7

我想知道是否可以播放动画 gif，然后在 gif 到达其动画结尾时通过 jquery 触发事件。一旦它这样做了，它就会循环回到队列的开头，并再次播放 gif then 事件。

如果你看看我的 jfiddle，我制作了一个人打字的小 gif。然后当他抬起头来得到一个想法时，我希望那个“想法”的 div 变成别的东西。我非常希望他头顶上的那个词是同步的，并在他的头弹出时立即改变。

http://jsfiddle.net/mMVhK/1/

<div id="thought">
    Amazing Idea
</div>

<div id="firstgif">
    <img src="http://i.imgur.com/pcc4DP5.gif"/>
</div>
4

1 回答 1

4

我对此的回答类似于这个答案和这个类似的stackoverflow问题。

如果您的 GIF 具有一定数量的帧且没有循环，您可以使用 javascriptsetTimeout来触发您的事件。但是，由于您正在玩一个猜谜游戏，GIF 的渲染是否会以与每次 javascript 执行相同的速度播放，所以它很有可能不同步。

一个更安全的选择是我链接的另一个答案所说的使用精灵贴图模拟动画的方式。这是通过使用 javascript 更改元素中图像的背景位置来实现的。这样，您可以更好地控制动画的动画效果，更好地控制 javascript 事件和更好的时机，因为它与 javascript 执行速度相关/它只会在您告诉它的动画帧处。

我没有示例，但是如果您对此有一个不错的开端或有任何其他问题，我很乐意提供帮助。

关于 CSS Sprites 的有用信息

于 2013-04-22T13:49:53.823 回答