Question

我正试图通过一系列图像快速循环以使用下面的setInterval生成动画。但是，如果我将焦点从浏览器选项卡移开然后再移回，则动画会闪烁。

我看到了一个关于使用“实时”来捕捉动画的帖子，但由于我使用了简单的显示/隐藏，我不确定如何应用。

var animation = setInterval(function(){

    var visible = $j('#container img:visible');
    var next    = visible.next('img');

    if(next.length <= 0) next = $j('#container img:first');

    next.show();
    visible.hide();

},64);

关于如何对抗闪烁的任何想法？

Answer 1

传统上，JavaScript动画可以通过多种方式处理。一种方法涉及使用诸如setTimeout或setInterval之类的定时函数来每隔几毫秒调整样式。另一种方法是创建一个循环，在动画的时间范围内尽可能多地改变样式。这两种方法的逻辑是在浏览器上抛出大量的动画帧，以便有希望呈现平滑的动作。

因此，即使浏览器尽可能多地渲染动画帧，丢弃的帧仍会产生看起来不稳定的动画，更不用说使用尽可能多的任务重载处理器的性能影响。

实际上，渲染更少的帧实际上更好，只要它们一致地渲染。那是因为我们的眼睛捡到了这些细微的变化，并且一些掉落的帧往往比整体更低的帧速率更突出。这就是HTML5的requestAnimationFrame API的用武之地。

以下是您的方案的示例：

 function animation(){

        var visible = $('#container img:visible');
        var next    = visible.next('img');

        if(next.length <= 0) next = $('#container img:first');

        next.show();
        visible.hide();

    };

   setInterval(function() {
      window.requestAnimationFrame(animation);
   }, 64);

DEMO

Javascript Intval显示/隐藏闪烁

1 个答案: