滞后于动画图像数组 [英] Lag in animated image array

问题描述

我正在制作由不断变化的图像数组（基于此。）动画通过变化的图像类前进。这是我当前的状态：

I'm working on a looping animation (like an animated GIF) made from an ever-changing array of images (based on this.) The animation advances via a changing image class. Here's what i have currently:

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持续时间，但这似乎没有帮助。 。 。不知道还有什么尝试。

Everything's working great except when the class changes there is a delay. I've tried fiddling with the setTimeout durations but it didn't seem to help . . . Not sure what else to try.

有什么办法可以避免滞后？

Any ideas on how to lose the lag?

jsfiddle此处

推荐答案

您需要先缓存已加载和已解码的图像。每次加载图像时，都要求浏览器从网络（如果幸运的话）从缓存中（重新）获取原始的二进制压缩图像文件。然后，它需要对其进行解码，解压缩并将其转换为RGBA位图，从这一点可以显示出来。

You need to first cache the loaded and decoded images. Loading images each time require the browser to (re)fetch the raw binary compressed image file from the network, or if lucky, the cache. Then it need to decode it, decompress it and convert it into a RGBA bitmap, which from this point can be shown.

此过程所需的时间比您制作动画所需的16.7-33.4ms（分别为60 / 30fps）长。每次设置src都会在后台启动加载过程。

This process can take longer than the 16.7-33.4ms you need to animate (60/30fps respectively). Every time src is set a loading process is started in the background.

因此，更合适的方法是：

So a more proper way to do this is to:

• 首先在后台加载所有图像。图像加载是异步的，因此您也必须使用onload处理程序进行处理。您应该为此设置一个处理程序，并在正确加载图像后更新框架数组。

• First load all images in the background. Image loading is asynchronous so you have to handle this as well using onload handler. You should make a single handler for this and when the images has loaded properly update the frame array.

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

Do not use setInterval/setTimeout. These are inaccurate and very inaccurate for animations. Instead use requestAnimationFrame which gives perfect sync with the monitor updates.

所以从本质上讲，您需要：

So in essence you need:

• 具有要加载的网址的数组，这些网址将被馈送到：


• 处理异步加载的图像加载器


• 加载图像后更新框架数组


• 使用requestAnimationFrame对帧数组中的图像进行动画处理（预加载）

• an array with urls to load, which are fed to:
• image loader that handles async loading
• when image has loaded update the frame array
• animate (preloaded) images in the frames array using requestAnimationFrame

这篇关于滞后于动画图像数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！