@zeni1agent

Как запустить и остановить анимацию?

Есть код который бесконечно анимирует картинку

Я хочу создать команды которые запускают код, ставят на паузу и ставят его заново
const svg = document.getElementById('svg-element')
const warp = new Warp(svg)

warp.interpolate(4)
warp.transform(([ x, y ]) => [ x, y, y ])

let offset = 0
var requestId = undefined;

function start(ani) {
    if (!requestId) {
       requestId = window.requestAnimationFrame(ani);
    }
}
function pause(ani) {
    if (requestId) {
       window.cancelAnimationFrame(ani);
       requestId = undefined;
    }
}
function stop() {
	offset = 0
}

function animate(){
	warp.transform(([ x, y, oy ]) => [ x, oy + 4 * Math.sin(x / 16 + offset), oy ])
	offset += 0.1
	self.start = start(animate)
	self.pause = pause(animate)
	self.stop = stop()
}
animate.start

При этом что бы команда start, pause, stop. можно было применить и к другим анимациям если они есть

Но может ли кто нибудь объяснить как это правильно сделать.
  • Вопрос задан
  • 36 просмотров
Пригласить эксперта
Ответы на вопрос 1
felony13twelve
@felony13twelve

Но может ли кто нибудь объяснить как это правильно сделать.

Не кто нечего не понял, немного конкретнее нужно!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы