逐帧动画，在JQuery中使用setInterval替换

Question

所以我在JQuery中创建一个基本函数，以便在盘旋时触发动画。而不是使用gif，我试图在数组中的png图像之间“切换”，因为gif不会给我我正在寻找的质量，并且svg动画似乎是针对可能的数字。

但是，到目前为止动画非常慢。 Setinterval似乎建议用于切换图像，但我想知道是否有更好的替代方案？

谢谢！

var frames = ["images/ruby/ruby0002.png", "images/ruby/ruby0004.png", "images/ruby/ruby0006.png", "images/ruby/ruby0007.png" , "images/ruby/ruby0008.png", , "images/ruby/ruby0009.png", "images/ruby/ruby0010.png"];
var index = 0;
$( "#Image" ).hover(function(imgAnimate) {
function imgAnimate()
{
  $('#Image').animate('fast', function()
  {
    $(this).attr('src', images[index]);
    $(this).animate('fast', function()
    {
      if (index === frames.length -1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
}

  $(document).ready(function()
    {
      setInterval(imgAnimate, 1000); //setTimeout has a similar outcome in this case, after testing it
    });

    });

Answer 1

如果您真的无法使用GIF，则可以随时预装图像。

添加 html ：

<img id='my_image' src='http://www.radbs.com/wp-content/uploads/2017/09/Mystery-Person-Silhouette.jpg' width='300'>

预加载所有图片：

my_images = ['https://assets2.hrc.org/files/images/resources/ComintOut-AsianPacificAmerican.png', 'https://qph.fs.quoracdn.net/main-qimg-a798e466698fa737c8853fe2217fc8ec-c','https://www.essence.com/sites/default/files/images/embed/black_woman_serious.jpg','https://i.pinimg.com/originals/74/5a/5f/745a5ff00611171a5f769c1ca10c4b4e.jpg','http://i.dailymail.co.uk/i/pix/2011/09/11/article-0-0DD59D6900000578-459_634x657.jpg']

function preload(my_images) {
    $(my_images).each(function(){
        $('<img/>')[0].src = this;
    });
}

preload(my_images);

循环遍历悬停上的所有预装图片：

cnt=0;
function loop_images() {
$('#my_image').attr('src', my_images[cnt])
setTimeout(function() {loop_images()},1500)
cnt++;
}

$('#my_image').on('mouseenter', function() {
loop_images();
})

结果：

但减少间隔时间不太可能让平滑的动画发生。这就是GIF和WEBGL存在的原因。

Fiddle