Question

我在setInterval上连续运行动画。在序列中有两个项目的动画工作正常但是当将第三个项目添加到序列时，当用户打开新选项卡并检查某些内容并返回到动画选项卡时，动画将获得messedup。

JSBin链接

https://jsbin.com/surukuhuka/edit?html,css,js,console,output

var ball_2_BlinkDuration = 100,
  ball_2_BlinkDelay = 50,
  ball_2_BlinkInterval = null,
  ball_2_BlinkIntervalDelay = 500,
  $ball_2 = $('.ball--2');

var delay = 15 * (ball_2_BlinkDuration + ball_2_BlinkDelay) + ball_2_BlinkIntervalDelay; //calculating delay
window.clearInterval(ball_2_BlinkInterval);


function dataFlowing__2() {
  $ball_2.velocity({
    bottom: "100%"
  }, {
    complete: function() {
      $(this).velocity({
        left: "90%"
      }, {
        complete: function() {
          $(this).velocity({
            top: "3%"
          }, {
            complete: function() {
              $(this).removeAttr('style');

            }
          });
        }
      });
    }
  });
}

var ball_2_BlinkInterval = window.setInterval(function() {
  dataFlowing__2();
}, delay);

.data--flow--2 {
  position: absolute;
  width: 103px;
  height: 176px;
  border-top: 10px solid #2F94BB;
  border-left: 10px solid #2F94BB;
  .ball--2 {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    background-color: #FFFFFF;
    bottom: 5px;
    left: -10px;
  }
  .data--flow--sub {
    float: right;
    background-color: #2F94BB;
    width: 10px;
    height: 10px;
  }
}

<div class="data--flow--2">


  <div class="ball--2"></div>
  <div class="data--flow--sub">

  </div>
</div>

Answer 1

当选项卡被隐藏时，您无法在现代浏览器中使用setInterval设置动画 - 它们会将setInterval限制为~1fps，此外，根据浏览器，Javascript的CPU数量会减少更多。

我刚刚对Velocity的后台处理进行了更改，因此它将尝试在后台以30fps的速度运行（由于需要进行其他更改而比尝试60fps更安全），这将使其成为2.0.3但是目前正在Github上进行其他更改或记录。

从技术上讲，它现在在后台使用WebWorker，当有动画并且隐藏选项卡时它会启动，并且每帧左右都会向动画发送一个消息 - 它不是设计得非常准确，而且它虽然已在所有现代桌面浏览器中进行过测试，但也无法在IE10（可能还有IE11）上运行。移动浏览器会更积极地暂停背景标签，因此这不相关。

另外值得注意的是 - window.focus / window.blur与窗口有关，而不是隐藏的标签。该窗口可以处于非活动状态并且仍在播放全速动画，但document.hidden是浏览器用于报告动画是否暂停的原因。

Answer 2

更改标签时暂停动画，并在窗口再次获得焦点时恢复播放：

function beginInterval(){
  ball_2_BlinkInterval = setInterval(function() {
    dataFlowing__2();
  }, delay);
}
$(window).focus(function() {
  beginInterval();
});

$(window).blur(function() {
  clearInterval(ball_2_BlinkInterval);
});

当动画运行浏览器标签变为不活动时，velocityjs动画会搞乱

2 个答案: