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)
Ответ
Посмотрев на ваш код решил немного сократить элементы 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)
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
