Как при нажатии на кнопку `Stop` остановить анимацию и заморозить изображение

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

Анимация планетарного механизма.

При нажатии на кнопку Stop анимация вращения шестеренок должна останавливаться и
изображение "замораживаться". Но в реальности изображение возвращается к исходному
состоянию. Это видно по желтым маркерам на шестеренках. Как добиться, чтобы при нажатии
на кнопку Stop изображение замерло в текущем состоянии и при последующем нажатии на
кнопку GO анимация началась  не сначала, а с зафиксированного состояния.

Ответ - надо убрать желтые маркеры не принимается  :-)







    

Ответы

Ответ 1

С svg особо не работал, так что вот что нагуглил:
Анимацию можно запустить/остановить через методы unpauseAnimations/pauseAnimations
соответственно.

Можно сделать так:



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();
}





Больше на хак похоже, но может кто-то дополнит.
Хотя может это действительно only way.


Ответ 2

Взял код @Other и беззастенчиво переписал с использованием старого доброго жуквери:



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

// Необходимо поймать второй клик (если на первом удалить атрибуты, анимация не начнётся),
потом подменяем функцию на вызов по "разморозке" анимации
var start = function(){
  if(flag === 1){
    // Убираем у animateTransform триггер, чтобы не сбрасывалась анимация на ноль
    $svg.find('animateTransform').removeAttr('begin');
    
    start = function() {
      svg.unpauseAnimations()
    };
    
    start();
  }
  flag++;
}

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




Ответ 3

Решение JS

На клавишу stop повешен обработчик события    

Функция   

 function Pause()
  {  
     SVGRoot.pauseAnimations();
  };


останавливает все запущенные анимации внутри svg до тех пор пока не будет запущена 

функция unpauseAnimations(), которая запускает анимации ровно с того места, где она
была остановлена предыдущей командой 



 var SVGDocument = null;
  var SVGRoot = null;
  var pauseButton = null;
  var playButton = null;
  var innerCircle = null;
  var outerCircle = null;
  var smallerCircle = null;

  function Init(evt)
  {  
     SVGDocument = evt.target.ownerDocument;
     SVGRoot = SVGDocument.getElementById('SVGRoot')

     pauseButton = SVGDocument.getElementById('stop1');
     playButton = SVGDocument.getElementById('gO1');
     innerCircle = SVGDocument.getElementById('innerCircle');;
     outerCircle = SVGDocument.getElementById('outerCircle');;
     smallerCircle = SVGDocument.getElementById('smallerCircle');;
  };

  function Pause()
  {  
     SVGRoot.pauseAnimations();
  };

  function Play()
  {
     if(SVGRoot.animationsPaused()){
        SVGRoot.unpauseAnimations();
     }
     else{
         innerCircle.beginElement();
         outerCircle.beginElement();
         smallerCircle.beginElement();
     }
  };