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

Question

[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. можно было применить и к другим анимациям если они есть

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