FaceHost
FaceHost
Домены
Хостинг
Виртуальные сервера (VPS)
Конструктор сайтов
Облачные сервисы
Партнерская программа
SVG как сделать обратное проигрывание анимации?
1,00
р.
р.
По клику нужно чтобы анимация останавилась на паузу,а потом по ещё одному клику воспроизвелась с тогоже места но в обратном направлении,как сделать?
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
Ответ
Посмотрев на ваш код решил немного сократить элементы 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
Left
Right