在鼠标悬停时播放 Gif 并在鼠标移出时暂停 Gif 而不替换图像？

Posted 2023-03-25

【中文标题】在鼠标悬停时播放 Gif 并在鼠标移出时暂停 Gif 而不替换图像？

【英文标题】：Play Gif on Mouseover and Pause Gif on mouse out without replacing images?

【发布时间】：2014-01-05 19:24:34

【问题描述】：

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

我注意到大多数 gif 在鼠标移出时会“重置”。也就是说，要么 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。它使用的是 CSS3

您链接的教程是关于 CSS 动画的，而不是关于 GIF 的。

AFAIK 你不能做任何事情来影响 css 中的动画 gif。但是，您可以使用 css 动画来模拟动画 gif 并实现此效果。

我会将您的 gif 分解成单独的帧，然后使用关键帧对其进行动画处理。然后你可以在任何你想停的地方。

我不认为 OP 试图将该链接表示为动画 .gif，而是将其用作他试图实现的效果的示例

【参考方案1】：

所以，我想了想......你可以做一些很酷的事情：

首先，将您的 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'); 

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() 
            // 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

【讨论】：

有趣！这和我的想法很接近。事实上，这几乎就是我所说的。但是我注意到codepen在Firefox中不起作用。是否有替代的后备方案？还有一种方法可以让图像在鼠标悬停时开始暂停并播放？在代码笔中实现的内容有点相反，但保留了暂停功能。真的很感谢你们所有的研究！

嗯......我不知道我是否知道除了一些js之外，我是否知道一种让它跨浏览器工作的方法。也许您可以创建某种 swapImage() 函数来做同样的事情（只需设置背景图像）。不过，我会在早上回到电脑前添加一个功能。与反转操作相同。恐怕你需要用 JavaScript 来做到这一点。

如果可能的话，Javascript 很好。就像我之前说的，如果无法完成，请不要为此付出太多努力。我什至不认为这是可能的，所以你们已经让我大吃一惊了哈哈。请慢慢来！

仍然没有空闲时间查看 js，但您只需将 animation: giffy 0.5s infinite linear 更改为 animation: giffy 0.5s infinite steps(1) 即可移除淡入淡出。

@XavierTheGreat，添加了一个 js 版本。你会想测试它，我只是写得很快。此外，预加载图像也符合您的最大利益。如果不这样做，您可能会看到空白帧。

【参考方案2】：

没有。 Gif 图像无法“看到”鼠标。它们只是显示的图像。为了暂停动画 gif，它需要交换未动画的类似图像。

正在发布的，有jquery plug ins to animate a sprite 由静态图像组成。这些插件将允许精灵在鼠标悬停时暂停

【讨论】：

寻找替代方案我发现GreenSock [免费和开源（尽管不是免费）] 可能值得一看。

谢谢您的回复。我将更多地研究“jquery 方法”，我还没有看到任何插件，所以这也有帮助。我会调查一下，看看它是否有任何好处。