Question

如何在浏览器选项卡之间切换时防止SMIL动画暂停？

我有使用``设置动画的SVG时钟。当您切换到另一个选项卡时，动画会冻结，并且无法赶上应有的位置。我希望该动画在页面不可见时平稳运行，或者在页面再次可见时暂停并赶上。我可以将其转换为CSS动画，没关系。

这是秒针的简化代码：

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来暂停内容，但是如何阻止他们这样做对我来说却是不可理解的。

Answer 1

好的。我想通了。
隐藏页面后，动画将以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()
     }
   })

防止在浏览器选项卡之间切换时暂停SMIL动画

如何在浏览器选项卡之间切换时防止SMIL动画暂停？

1 个答案: