当动画运行浏览器选项卡变为非活动状态时，velocityjs 动画变得混乱

Question

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

JSBin link

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

切换标签时暂停动画，window 再次获得焦点时恢复：

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

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

Answer 2

当标签被隐藏时，您无法在现代浏览器中对setInterval进行动画作用 - 它们将totletle setInterval to 〜1fps，此外，CPU的数量Javascript的数量会更减少。在浏览器上。

我刚刚对 Velocity 的后台处理进行了更改，因此它将尝试在后台将运行保持在 30fps（由于需要其他更改，比尝试 60fps 更安全），这将使它进入 2.0.3，但目前正在 Github 进行其他更改/记录。

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

另请注意 - window.focus / window.blur 与 window 有关，而不是隐藏的选项卡。 window 可以处于非活动状态并仍在全速播放动画，但是 document.hidden 是浏览器用来报告动画是否暂停的内容。

当动画运行浏览器选项卡变为非活动状态时，velocityjs 动画变得混乱

velocityjs animation get messed up when animation running browser tab becomes inactive

javascript

css

jquery

velocity.js

当动画 运行 浏览器选项卡变为非活动状态时，velocityjs 动画变得混乱

velocityjs animation get messed up when animation running browser tab becomes inactive

javascript

css

jquery

velocity.js

当动画运行浏览器选项卡变为非活动状态时，velocityjs 动画变得混乱