在鼠标悬停时播放GIF并在鼠标悬停时暂停GIF而不替换图像？ [英] Play Gif on Mouseover and Pause Gif on mouse out without replacing images?

问题描述

我试图寻找一个代码示例，允许用户在鼠标悬停时动画一个gif，并在鼠标移出时暂停。我看过很多教程谈论这个，但我想要一个不同的效果。

我注意到，大多数gifs复位时鼠标出来。也就是说，gif被覆盖一个通用的图像或动画回到开始。我想实现的是一个更无缝的暂停，让您从没有使用占位符图像的地方，你离开了。类似于此页面上的示例：

http://www.valhead.com/2013/03/11/animation-play-state/

请注意当你把鼠标放在图像上，动画只是暂停而不替换任何东西，然后恢复。

我不知道是否可能与gif，因为这个例子是使用基本的css形状，但有一些方法暂停gif鼠标出来和恢复鼠标，而不覆盖循环动画上的图像？如果没有，是否有一种方法可以使用一个电影文件，当鼠标悬停在其上，并将其放置在鼠标悬停在它上面的电影文件？

谢谢！ >

编辑：感谢@brbcoding和他的天才，这个问题解决了！有关解决方案的详细信息可以在以下帖子或他的博客文章中找到： http://codyhenshaw.com/blog/2013/12/17/faux-animated-gifs-with-css3-keyframes/

首先，将您的gif分成多个图片，然后使用CSS关键帧为它们添加动画效果。

 ＃faux-gif {
 position ：绝对
 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; 
 / *动画：giffy 0.5s无限线性; * / 
 / *帧之间没有淡入淡出* / 
动画：giffy 0.5s无限步（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'）; } 
} 
  

DEMO

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（）{
 //将第一个图像设置为第一个图像
 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; 
 .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（）; 
}）; 
} 
  

DEMO

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.

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:

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?

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/

解决方案

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.

#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'); }
}

DEMO

JavaScript Version... Not tested very thoroughly, but this would be the basic idea.

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();
});
}

DEMO

这篇关于在鼠标悬停时播放GIF并在鼠标悬停时暂停GIF而不替换图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！