场景

2023年03月19日

柏拉文

越努力，越幸运

一、实现一个 2s 的动画

---

let start = null;
const box = document.getElementById("box");
function workLoop(timestamp) {
    if (!start) {
        start = timestamp;
    }
    let process = timestamp - start;
    box.style.left = Math.min(process / 10, 100) + 'px';
    if (process < 2000) {
        window.requestAnimationFrame(workLoop);
    }
}
window.requestAnimationFrame(workLoop);

二、实现一个无线循环的动画

---

const box = document.getElementById("circle");
    let flag = false;
    let width = box.clientWidth;
    function loop() {
    if (flag) {
        if (width >= 400) {
            flag = false;
        }
        width += 1;
    } else {
        if (width <= 100) {
            flag = true;
        }
        width -= 1;
    }
    box.style.width = `${width}px`;
    box.style.height = `${width}px`;
}

function animationFrame() {
    loop();
    window.requestAnimationFrame(animationFrame);
}
animationFrame();