Html 在鼠标悬停时播放 Gif 并在鼠标移开时暂停 Gif 而不替换图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20644209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play Gif on Mouseover and Pause Gif on mouse out without replacing images?
提问by XavierTheGreat
I'm trying to look for an example of code that allows the user to animate a gif on mouseover and pause when mouse out. I've seen many tutorials talking about this but I want a different effect.
我正在尝试寻找一个代码示例，该示例允许用户在鼠标悬停时为 gif 设置动画并在鼠标移开时暂停。我看过很多教程都在谈论这个，但我想要一个不同的效果。
I noticed that most gifs "reset" when on mouse out. That is, either the gif is covered with a generic image or the animation reverts back to the start. What I would like to achieve is a more seamless "pause" that allows you to start where you left off without using a placeholder image. Similar to the example on this page:
我注意到大多数 gif 在鼠标移开时“重置”。也就是说，要么 gif 被通用图像覆盖，要么动画恢复到开头。我想要实现的是更无缝的“暂停”，让您可以在不使用占位符图像的情况下从上次中断的地方开始。类似于此页面上的示例：
http://www.valhead.com/2013/03/11/animation-play-state/
http://www.valhead.com/2013/03/11/animation-play-state/
Notice how when you put the mouse over the image, the animation just pauses without replacing anything, and resumes otherwise.
请注意，当您将鼠标放在图像上时，动画只是暂停而不替换任何内容，否则会继续。
I don't know if it's possible with a gif because this example is using basic css shapes, but there has to be some way to pause the gif on mouse out and resume on mouse over without covering the image on a looping animation? If not is there a way to use a movie file that pauses on mouse over and plays where it left off when you put the mouse over it?
我不知道是否可以使用 gif，因为此示例使用的是基本的 css 形状，但是必须有某种方法可以在鼠标移开时暂停 gif 并在鼠标悬停时继续播放，而不会在循环动画上覆盖图像？如果没有，有没有办法使用在鼠标悬停时暂停并在将鼠标悬停在其上时播放的电影文件？
Thanks!
谢谢！
EDIT: Thanks to @brbcoding and his genius, this issue was solved! Details on the solution can be found either in the posts below or on his blog post: http://codyhenshaw.com/blog/2013/12/17/faux-animated-gifs-with-css3-keyframes/
编辑：感谢@brbcoding 和他的天才，这个问题解决了！有关解决方案的详细信息可以在下面的帖子或他的博客文章中找到：http: //codyhenshaw.com/blog/2013/12/17/faux-animated-gifs-with-css3-keyframes/
回答by brbcoding
So, I thought about it for a bit... You could do something cool like this:
所以，我想了一下......你可以做一些很酷的事情：
First, break your gif into multiple images, then animate them with css keyframes.
首先，将您的 gif 分成多个图像，然后使用 css 关键帧为它们设置动画。
#faux-gif {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
background-image: url(http://i.imgur.com/E2ee6fI.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
width: 300px;
height: 300px;
/* animation: giffy 0.5s infinite linear; */
/* no fade between frames */
animation: giffy 0.5s infinite steps(1);
}
#faux-gif:hover {
animation-play-state:paused;
}
@keyframes giffy {
0% { background-image: url('http://i.imgur.com/E2ee6fI.gif'); }
15% { background-image: url('http://i.imgur.com/JIi0uul.gif'); }
30% { background-image: url('http://i.imgur.com/owNGnNN.gif');}
45% { background-image: url('http://i.imgur.com/2Ii6XOz.gif'); }
60% { background-image: url('http://i.imgur.com/ZmQBrQ5.gif'); }
75% { background-image: url('http://i.imgur.com/iAsfHyY.gif'); }
90% { background-image: url('http://i.imgur.com/AJwRblj.gif'); }
100% { background-image: url('http://i.imgur.com/fx5wUNY.gif'); }
}
JavaScript Version... Not tested very thoroughly, but this would be the basic idea.
JavaScript 版本...没有经过非常彻底的测试，但这将是基本思想。
window.onload = function() {
function FauxGif(element, frames, speed) {
this.currentFrame = 0,
this.domElement = element,
this.frames = frames || null,
this.speed = speed || 200;
this.interval;
this.init();
}
FauxGif.prototype = {
init: function() {
// set the first one to the first image
console.log(this.frames[0])
this.domElement.style.backgroundImage = "url(" + this.frames[0] + ")";
},
pause: function() {
clearInterval(this.interval);
},
resume: function() {
var that = this;
that.interval = setInterval(function(){
that.currentFrame < that.frames.length - 1 ? that.currentFrame++ : that.currentFrame = 0;
that.domElement.style.backgroundImage = "url(" + that.frames[that.currentFrame] + ")";
}, this.speed);
}
}
var frames = [
'http://i.imgur.com/E2ee6fI.gif',
'http://i.imgur.com/JIi0uul.gif',
'http://i.imgur.com/owNGnNN.gif',
'http://i.imgur.com/2Ii6XOz.gif',
'http://i.imgur.com/ZmQBrQ5.gif',
'http://i.imgur.com/iAsfHyY.gif',
'http://i.imgur.com/AJwRblj.gif',
'http://i.imgur.com/fx5wUNY.gif'
]
var elem = document.querySelector('#faux-gif'),
gif = new FauxGif(elem, frames);
elem.addEventListener('mouseenter', function(){
gif.resume()
});
elem.addEventListener('mouseleave', function() {
gif.pause();
});
}
回答by Scott
There is not. Gif images can not "see" the mouse. They are merely images which display. In order to pause an animated gif it requires the swapping of a similar image which is not animated.
那没有。Gif 图像无法“看到”鼠标。它们只是显示的图像。为了暂停动画 gif，它需要交换一个没有动画的类似图像。
That being posted, there are jquery plug ins to animate a spriteconsisting of static images. These plug ins wouldallow the sprites to pause on mouse over
发布后，有jquery 插件可以为由静态图像组成的精灵设置动画。这些插件将允许精灵在鼠标悬停时暂停
