如何解决防止在浏览器选项卡之间切换时暂停SMIL动画
如何在浏览器选项卡之间切换时防止SMIL动画暂停?
我有使用`
这是秒针的简化代码:
HTML:
<svg viewBox="-250 -250 500 500" fill="none" stroke="#000">
<!-- ... -->
<path id="Sec" stroke="#000" stroke-width="14" d="M0 0v-220">
<animatetransform fill="freeze" additive="sum" attributename="transform" dur="60s" from="0" repeatcount="indefinite" to="360" type="rotate" />
</path>
<!-- ... -->
</svg>
JS:
const date = new Date()
const sec = date.getSeconds()
document.getElementById('Sec').setAttribute('transform',`rotate(${(sec * 360 / 60) % 360})`)
我知道如何使用Page Visibility API
来暂停内容,但是如何阻止他们这样做对我来说却是不可理解的。
解决方法
好的。我想通了。
隐藏页面后,动画将以animationsPaused()
暂停。
当页面再次可见时,脚本:
- 获取新日期
- 使用
setCurrentTime(0)
重新设置动画时钟
- 更新
<path>
transform
属性 - 以
unpauseAnimations()
开始动画
HTML:
<svg id="Watch" viewbox="-250 -250 500 500" fill="none" stroke="#000">
<!-- ... -->
<path id="Sec" stroke="#000" stroke-width="14" d="M0 0v-220">
<animatetransform fill="freeze" additive="sum" attributename="transform" dur="60s" from="0" repeatcount="indefinite" to="360" type="rotate" />
</path>
<!-- ... -->
</svg>
JS:
const svg = document.getElementById('Watch')
let date = new Date()
const watch = () => {
document.getElementById('Sec').setAttribute('transform',`rotate(${(date.getSeconds() * 360 / 60) % 360})`)
}
window.requestIdleCallback(() => watch())
document.addEventListener('visibilitychange',() => {
if (document.hidden) svg.pauseAnimations()
else {
date = new Date()
svg.setCurrentTime(0)
watch()
svg.unpauseAnimations()
}
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。