pauseOnDocumentHidden

控制引擎在浏览器标签页隐藏时是否暂停动画。
当true时，标签页失去焦点时动画会自动暂停。当false时，动画会调整其currentTime以弥补在后台闲置的时间，看起来像是动画从未暂停过。

engine.pauseOnDocumentHidden = true;

接受

布尔

默认

true

pauseOnDocumentHidden 代码示例

import { engine, utils, createTimer } from 'animejs';

const [ $globalTime ] = utils.$('.global-time');
const [ $engineTime ] = utils.$('.engine-time');
const [ $toggle ] = utils.$('.toggle');

const startTime = Date.now();

const globalTimer = setInterval(() => {
  $globalTime.innerHTML = Date.now() - startTime;
}, 16);

const engineTimer = createTimer({
  onUpdate: self => $engineTime.innerHTML = self.currentTime
});

const toggleSetting = () => {
  const isPauseWhenHidden = engine.pauseOnDocumentHidden;
  if (isPauseWhenHidden) {
    engine.pauseOnDocumentHidden = false;
    $toggle.innerHTML = '○ Disabled (Switch tab to see the effect)';
  } else {
    engine.pauseOnDocumentHidden = true;
    $toggle.innerHTML = '● Enabled (Switch tab to see the effect)';
  }
}

// Switch tab to see the effect

$toggle.addEventListener('click', toggleSetting);

<div class="large centered row">
  <div class="col">
    <pre class="large log row">
      <span class="label">global time</span>
      <span class="global-time value lcd">0</span>
    </pre>
  </div>
  <div class="col">
    <pre class="large log row">
      <span class="label">engine time</span>
      <span class="engine-time value lcd">0</span>
    </pre>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button toggle">● Enabled (Switch tab to see the effect)</button>
  </fieldset>
</div>

#engine-engine-parameters-pauseondocumenthidden .button { max-width: 100% }