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

对于Javascript中的动画，使用setTimout而不是setInterval通常更容易。最好有一个函数连续调用实现动画的函数，而不是用多个setIntervals驱动动画。

Javascript看起来像这样：

$("#ball").html("<img src='" +images[0] +"'>").show()
setInterval(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]   
}

这是一个工作小提琴。我无法判断是否有任何明显的延迟。

https://jsfiddle.net/4bb0wwsz/

Answer 2

感谢您的帮助，我最终接受了Rob Scott的建议并转而使用css动画来获得闪光效果，仍然使用jquery来提升图像效果。

的CSS：

img {
width:0;
height:0;
position:absolute;
top:0;
left:0;
    -webkit-animation-name: flash;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:steps(1, end);
}

.first, .second, .third, .fourth, .fifth {
display:block;width:100%;height:auto;}

.first {-webkit-animation-delay:0s;}
.second {-webkit-animation-delay:0.2s;}
.third {-webkit-animation-delay:0.4s;}
.fourth{-webkit-animation-delay:0.6s;}
.fifth{-webkit-animation-delay:0.8s;}

@-webkit-keyframes flash {0% {opacity: 1;}20% {opacity: 0;}100% {opacity: 0;}}

JS：

// MOVE FORWARD 
$('.fifth').prev().addClass('fourth');
$('.fourth').prev().addClass('third');
$('.third').prev().addClass('second');
$('.second').prev().addClass('first');

setInterval(function(){ 
$('.fourth, .third, .second, .first').attr('class','');
$('.fifth').removeClass('fifth').next().addClass('fifth');
$('.fifth').prev().addClass('fourth');
$('.fourth').prev().addClass('third');
$('.third').prev().addClass('second');
$('.second').prev().addClass('first');

},10000);

http://jsfiddle.net/milpool/et05pvw5/

Answer 3

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

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

所以更合适的方法是：

首先在后台加载所有图像。图像加载是异步的，因此您必须使用onload处理程序来处理它。您应该为此创建一个处理程序，并且在正确加载图像时更新帧数组。
不要使用setInterval / setTimeout。这些对于动画来说是不准确且非常不准确的。而是使用requestAnimationFrame与监视器更新完美同步。

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

一个带有要加载的网址的数组，它们被送到：
处理异步加载的图像加载程序
当图像加载时更新帧数组
使用requestAnimationFrame

动画图像阵列滞后

3 个答案: