Перезапуск SVG анимации через удаление animateTransform

#javascript #css #css3 #svg #анимация

Всем привет. Возникла проблема с svg анимацией. Мне нужно чтобы js останавливал анимацию
круга ( для этого я удаляю тег ), а затем возобновлял ее ( возвращаю
тег обратно), и анимация начиналась либо с начала, либо, что еще лучше, с того места
где остановилась.

Но при возвращении тега анимация продолжается с того момента, где был бы круг если
бы я не удалял анимацию. Собственно вопрос в том, что я делаю неправильно.

Заранее спасибо!



const circle = document.getElementsByTagName('circle')[0],
  animate = ``;
let b = true;
setInterval(() => {
  b ? circle.innerHTML = '' : circle.innerHTML = animate;
  b = !b
}, 1000);




    

Ответы

Ответ 1

Добавляем кнопки "GO" и "STOP" старта и остановки анимации. На
которые вешаем события onclick='start()' и  onclick='pause()'




 





Добавляем в  анимацию команду запуска begin="gO1.click" при клике
на кнопке с идентификатором id="gO1"  
Добавляем скрипт, который управляет остановкой анимации и запуска её
вновь с остановленного места.   


Ниже полный код приложения:   



let flag = 0,
    svg = document.querySelector('svg');

// Необходимо поймать второй клик (если на первом удалить атрибуты, анимация не начнётся),
потом подменяем функцию на вызов по "разморозке" анимации
let start = function(){
  if(flag === 1){
    // Убираем у animateTransform триггер, чтобы не сбрасывалась анимация на ноль
    Array.from(svg.querySelectorAll('animateTransform')).forEach(e => e.removeAttribute('begin'));
    start = _ => svg.unpauseAnimations();
    start();
  }
  flag++;
}

const pause = function(){
  svg.pauseAnimations();
}  
 




Скрипт и комментарии к нему не мои.  Особая благодарность @Other, который в своё
время нашёл его на просторах интернета.    

Второй пример анимации отрисовки спирали   



let flag = 0,
    svg = document.querySelector('svg');
let start = function(){
  if(flag === 1){
    Array.from(svg.querySelectorAll('animateMotion')).forEach(e => e.removeAttribute('begin'));
    start = _ => svg.unpauseAnimations();
    start();
  }
  flag++;
}
const pause = function(){
  svg.pauseAnimations();
}  
 




Третий пример анимации с animateMotion     



let flag = 0,
    svg = document.querySelector('svg');
let start = function(){
  if(flag === 1){
    Array.from(svg.querySelectorAll('animateMotion')).forEach(e => e.removeAttribute('begin'));
    start = _ => svg.unpauseAnimations();
    start();
  }
  flag++;
}
const pause = function(){
  svg.pauseAnimations();
}  
  


Ответ 2

Можно сделать так, если я вас правильно понял. Вместо  взял свойство animation
и добавил значение forwards для сохранения местоположения элемента:



var circle = document.getElementsByTagName("circle")[0];

function func() {
  if (this.checked = true) {
    circle.classList.toggle("animate-circle");
    circle.classList.toggle("back");
  }
}
.animate-circle {
  animation: offsetRight 1s linear 1 forwards;
}

.back {
  animation: offsetLeft 1s linear 1 forwards;
}

@keyframes offsetRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(460px);
  }
}

@keyframes offsetLeft {
  from {
    transform: translateX(460px);
  }
  to {
    transform: translateX(0px);
  }
}