javascript - 单击鼠标启动动画 gif，从第一帧开始

Question

我在循环动画中从不正确的点开始的 gif 有问题。

我制作了一个动画，其中气泡在屏幕上升起然后淡出。气泡图形在创建时只是一个 png。

但是，如果单击它们，我想显示气泡弹出的动画 gif。这是我的动图:

http://digitalshowcase.somethingbigdev.co.uk/assets/portfolio/db-pop-bubble.gif

为了在 gif 加载到 div 时停止出现“跳转”，我正在预加载它:

(new Image()).src = "http://digitalshowcase.somethingbigdev.co.uk/assets/portfolio/db-pop-bubble.gif";

但是我发现当我点击并将新的 gif 放在 div 中时...

 $('body').on('click', '.db-bubble', function() {
        ...
        $(this).html('[![][1]][1]');
        ...
});

...它不是在第一帧开始 gif。我只能假设从加载 gif 的那一刻起，它就开始“播放”，因此当它被插入到 div 中时，它会以某种方式在 gif 的几秒周期内的任何时候加载它。

尝试点击我示例中的许多气泡，您会发现它无法正常工作。它应该从圆形气泡开始，然后变成一个大的“爆炸”图形，然后几个小气泡应该消失。您会注意到它在 gif 中的任何一点开始。

http://codepen.io/anon/pen/EjQgoV

有什么想法吗？

Answer 1

你能试试这个吗？

http://codepen.io/anon/pen/QbQGbe

我为每个弹出的气泡缓存不同的 src:

    setInterval(function makeBubble() {
          (new Image()).src = "http://digitalshowcase.somethingbigdev.co.uk/assets/portfolio/db-pop-bubble.gif?db-bubble-"+bubbleID;
....

稍后在您用来弹出气泡的函数中，您必须设置为该气泡缓存的 src(由其 bubbleID 标识):

$('body').on('click', '.db-bubble', function() {
    var bubbleID = $(this).attr('id');
    src = 'http://digitalshowcase.somethingbigdev.co.uk/assets/portfolio/db-pop-bubble.gif?'+bubbleID;
    var img = new Image();
    img.src=src;
    $(this).html(img);
    setTimeout(function() {
      // murder time
      $("#" + bubbleID).remove();
    }, 1000);
  });