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% }