Last updated 2 years ago
Was this helpful?
⟩ ⟩ ⟩ ⟩ moving cat
keep moving an image by updating its .style.left property.
.style.left
replit ⟩
const {log} = console; const {cos} = Math; // ⭐️ import import { $ } from './js/ext/Node_ext.js'; // Node extension // -------------------------------------------------------------------- let cat = $("img"); let angle = Math.PI / 2; // ⭐️ 1. request first frame requestAnimationFrame(animate); // render loop // - t1: current timestamp (in ms) // - t0: last timestamp function animate(t1, t0) { if (!t0) t0 = t1; // ⭐️ 2. update animation angle += (t1 - t0) * 0.001; // 1/sec = 57.3 °/sec cat.style.left = cos(angle) * 100 + "px"; // ⭐️ 3. request next frame requestAnimationFrame(t2 => animate(t2, t1)); }
.requestAnimationFrame()
Eloquent JS ⟩ DOM ⟩