Анимация планетарного механизма
При нажатии на кнопку Stop анимация вращения шестеренок должна останавливаться и изображение "замораживаться". Но в реальности изображение возвращается к исходному состоянию. Это видно по желтым маркерам на шестеренках. Как добиться, чтобы при нажатии на кнопку Stop изображение замерло в текущем состоянии и при последующем нажатии на кнопку GO анимация началась не сначала, а с зафиксированного состояния.
Ответ - надо убрать желтые маркеры не принимается :-)
Ответ
С 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.
Комментариев нет:
Отправить комментарий