如何使用JS触发GIF动画？

Question

我有一个播放一次的动画 GIF（不循环）。我希望它在点击时有动画效果。 我尝试了这样的事情：

 $('#plus').click(function(){
    $('#plus').attr('src','');
    $('#plus').attr('src','img/plus.gif')
 });

希望快速重置 src 会触发动画，但没有运气。有人知道会做什么吗？

Answer 1

尝试使用随机生成的查询字符串添加图像，使其在浏览器中看起来像新图像。

<script language="javascript" type="text/javascript">
function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    document.randform.randomfield.value = randomstring;
}
$('#plus').click(function(){
    $('#plus').attr('src','img/plus.gif?x=' + randomString())
    });
</script>

Answer 2

function refreshSrc(who){
    return who.src= who.src.split('?')[0]+'?='+(+new Date());
}
refreshSrc(document.images[0])

如果您愿意，可以使用 jQuery 语法来启动它。

Answer 3

这是一种替代方法。

您可以将各个帧导出为其自己的图像并通过 JavaScript 处理动画。

它可以让你做一些很酷的事情。一位同事最近制作了一个小计时器动画，该动画与我们图片库中的可配置幻灯片间隔同步。

您从中得到的另一件事是您可以使用 png 并具有半透明的背景。

某处可能有一个用于 javascript 的精灵动画库:)

Answer 4

您是否尝试过删除 img 标签并再次添加回来？ （没试过，只是一个想法）

Answer 5

您可以尝试使用单帧图像（动画的第一帧）并在单击时显示/隐藏每个图像。如果你想让它在动画完成后重置回单帧图像，你可以使用setTimeout（以动画的长度作为时间的长度）并让它隐藏动画并显示静态图像。

Answer 6

对于那些想要在滚动到视图中时执行此操作的人，我执行了以下操作。

override.js 的链接： https://github.com/morr/jquery.appear

$('img.large-magnify-glass-animation').appear(function() {
    $(this).delay(200, function(){
        $(this).attr('src','http://example.com/path/to/gif.gif');
    });
});

我只是在短暂的延迟后，通过 attr('src') 在可见性上加载相同的 gif。没有时间戳或随机字符函数。刚刚使用了出现插件。