跳到主要内容

场景

2023年03月19日
柏拉文
越努力，越幸运

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

思路

  • 时间间隔: 1000/60 浏览器大多数为 60HZ

实现

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`;
}

setInterval(() => {
  loop();
}, 1000 / 60);

查看 requestAnimationFrame 实现