Есть код, который бесконечно анимирует картинку
const svg = document.getElementById('svg-element')
const warp = new Warp(svg)
warp.interpolate(4)
warp.transform(([ x, y ]) => [ x, y, y ])
let offset = 0
function animate()
{
warp.transform(([ x, y, oy ]) => [ x, oy + 4 * Math.sin(x / 16 + offset), oy ])
offset += 0.1
requestAnimationFrame(animate)
}
animate()
#svg-element {
margin: 20px;
overflow: visible;
width: 300px;
height: auto;
}
<script src="https://cdn.jsdelivr.net/npm/warpjs@1.0.8/dist/warp.js"></script>
<svg id="svg-element" viewBox="0 0 303 251">
<circle cx="88.784" cy="141.382" r="88.784" style="fill: #00fbd1; mix-blend-mode: multiply;"/>
<path d="M278.078,26.195l-161.04,-26.195l-26.195,161.04l161.04,26.195l26.195,-161.04Z" style="fill: #d867ff; mix-blend-mode: multiply;"/>
<path d="M170.608,63.772l131.392,155.722l-213.216,30.874l81.824,-186.596Z" style="fill: #fffa2a; mix-blend-mode: multiply;"/>
</svg>
Я хочу создать команды, которые запускают код, ставят его на паузу и обнуляют анимацию.
Примерно так:
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_animation_1()
не имеет смысла.
stop(),
play(),
pause()` одинаковы. Что то похожее я видел в three.js