function Keyframer(values, { keyframes = 1, format = d => d.value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); let frames = (values.length -1) * keyframes + 1 function key(i) { return Math.floor(i / keyframes) } const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; let lasti = initial; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? frames - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + frames) % frames; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); let i = form.i.valueAsNumber if(i < 0) i = 0; // not sure why i can't update direction here, but it is used in strange ways elsewhere // this is more of an observed direction let dir = i - lasti let index = key(i) let nextIndex = key(i) + 1 let t = (i % keyframes) / keyframes if(dir < 0) { index = (values.length -1) - key(frames - i) if(index < 0) index = 0 nextIndex = index - 1 t = t = ((frames - i) % keyframes) / keyframes } if(nextIndex > values.length - 1 || nextIndex < 0) { nextIndex = key(i) } // console.log("key(i), nexti", index, nextIndex) // console.log("i, lasti", i, lasti) form.value = { next: values[nextIndex], value: values[index], t, index, nextIndex, dir }; lasti = i form.o.value = format(form.value, index, nextIndex, t, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === frames - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % frames; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); disposal(form).then(stop); return form; }