javascript - 动画图像阵列滞后

Question

我正在制作一个由不断变化的图像数组(基于 this )制作的循环动画(如动画 GIF)。动画通过不断变化的图像类前进。这是我目前拥有的:

function animateEverything() {

var imgc = 0;

var frame1 = $('.start').attr('src');
var frame2 = $('.start').prev().attr('src');
var frame3 = $('.start').prev().prev().attr('src');
var frame4 = $('.start').prev().prev().prev().attr('src');
var frame5 = $('.start').prev().prev().prev().prev().attr('src');

var images = [frame1,frame2,frame3,frame4,frame5];

$("#ball").html("<img src='" +images[0] +"'>").show()
setTimeout(setImage, 50);

function setImage() {
    var next=new Image()
    images.push(images.shift())
    next.onload=function(){
        $("#ball img").attr("src", this.src)
    }
    next.src= images[0] 
    setTimeout(setImage, 500);   
}   

// MOVE FORWARD     
setInterval(function(){
$('.start').removeClass('start').next().addClass('start');
frame1 = $('.start').attr('src');
frame2 = $('.start').prev().attr('src');
frame3 = $('.start').prev().prev().attr('src');
frame4 = $('.start').prev().prev().prev().attr('src');
frame5 = $('.start').prev().prev().prev().prev().attr('src');
images = [frame1,frame2,frame3,frame4,frame5];
},10000);
}

animateEverything();    

一切都很好，除了类更改时有延迟。我试过摆弄 setTimeout 持续时间，但它似乎没有帮助。 . .不确定还能尝试什么。

关于如何消除延迟有什么想法吗？

jsfiddle here

Answer 1

您需要先缓存加载和解码的图像。每次加载图像都需要浏览器从网络或缓存中(重新)获取原始二进制压缩图像文件。然后需要对它进行解码，解压，转换成RGBA位图，从这里就可以显示出来了。

此过程可能比制作动画所需的 16.7-33.4 毫秒更长(分别为 60/30fps)。每次设置 src 时，都会在后台启动加载过程。

所以一个更合适的方法是:

• 首先在后台加载所有图像。图像加载是异步的，因此您也必须使用 onload 处理程序来处理这个问题。您应该为此创建一个处理程序，并在正确加载图像后更新帧数组。

• 不要使用 setInterval/setTimeout。这些对于动画来说是不准确的，非常不准确。而是使用 requestAnimationFrame，它可以与监视器更新完美同步。

所以本质上你需要:

• 一个包含要加载的 url 的数组，这些 url 被馈送到:
• 处理异步加载的图像加载器
• 当图像加载完成后更新帧数组
• 使用 requestAnimationFrame 为帧数组中的(预加载)图像制作动画