Javascript Intval 显示/隐藏闪烁

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