缓动动画 animate




var btn = document.getElementById("btn");
var box = document.getElementById("box");
var timer = null;
btn.onclick = function() {
    // 盒子本身的位置 + 步长  timer = setInterval(function() {
       box.style.left = box.offsetLeft + 5 + "px";  // 核心的动画原理  console.log(box.offsetLeft);
       // 到了某个地方就应该停止定时器  if(box.offsetLeft >=400) {  // 知道为什么用 offsetLeft 不带px  clearInterval(timer);
       }
   },30)
}

你可能感兴趣的:(缓动动画 animate)