SVG как сделать обратное проигрывание анимации?

По клику нужно чтобы анимация останавилась на паузу,а потом по ещё одному клику воспроизвелась с тогоже места но в обратном направлении,как сделать?



var play = document.querySelector(".play"),
  pause = document.querySelector(".pause"),
  reverse = document.querySelector(".reverse"),
  animType = document.getElementById("forward"),
  backward = document.getElementById("backward"),
  svg = document.getElementById("svg");


play.addEventListener('click', function() {
  animType.beginElement();
  console.log(play, animType);

}, false);

pause.addEventListener('click', function() {
  animType.endElement();
  // svg.pauseAnimations();

}, false);

reverse.addEventListener('click', function() {
  // backward.endElement();
  svg.unpauseAnimations();

}, false);


Play
Pause
Reverse



    

Ответы

Ответ 1

Посмотрев на ваш код решил немного сократить элементы animateMotion потому что дл
того что бы анимация прошла обратно, достаточно что бы значение keyPoints были в обратном порядке. 

Вот и сам код с обратным проигрыванием анимации:



var play = document.querySelector(".play"),
        pause = document.querySelector(".pause"),
        reverse = document.querySelector(".reverse"),
        animType = document.getElementById("forward"),
        //backward = document.getElementById("backward"),
        svg = document.getElementById("svg");

var left_to_right_key = '0.3;1;0;0.3';
var right_to_left_key = '0.3;0;1;0.3';

play.addEventListener('click', function() {
    animType.setAttribute('keyPoints', left_to_right_key);
    //animType.endElement();
    animType.beginElement();
}, false);

pause.addEventListener('click', function() {
    animType.endElement();

}, false);
reverse.addEventListener('click', function() {
    animType.setAttribute('keyPoints', right_to_left_key);
    //animType.endElement();
    animType.beginElement();

}, false);


Play
Pause
Reverse


Ответ 2

В инете много как перевернуть анимацию для простых значений keyTimes и keyPoints
если расширить логику на более сложные значения, то нужно сделать так для обратной анимации



  forward.attributes.keyPoints.value = forward.attributes.keyPoints.value.split(";").reverse().join(";");

  arKeyTimes = forward.attributes.keyTimes.value.split(";");
  arKeyTimesNew = new Array();
  for( var i = 0; i < arKeyTimes.length; i++ )
  {
    arKeyTimesNew[i] = 1-arKeyTimes[arKeyTimes.length-i-1];
  
  }
  forward.attributes.keyTimes.value = arKeyTimesNew.join(";");




не претендую на кросс-браузерность и красоту.