Блог

Как предотвратить приостановку анимации SMIL при переключении между вкладками браузера?

У меня есть SVG-часы, которые анимируются с помощью <animatetransform> . При переключении на другую вкладку анимация зависает и не догоняет, где она должна быть. Я хочу, чтобы эта анимация либо выполнялась плавно, когда страница не видна, либо приостанавливалась и возобновлялась, когда страница снова становится видимой. Я могу преобразовать это в анимацию 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 для приостановки вещей, но как предотвратить их от этого, для меня непонятно.

ОК. Я понял это.
Когда страница скрыта, анимация приостанавливается animationsPaused() .
Когда страница снова становится видимой, скрипт:

1. получает новую дату
2. сбрасывает анимационные часы с помощью setCurrentTime(0)
3. <path> transform атрибут обновления
4. запускает анимацию с 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()
     }
   })