js如何实现动画效果

基本回答

1. setTimeout():使用定时器setTimeOut()来实现动画效果，使用clearTimeout()来清除定时器

let box = document.getElementById("box)
let width
let timer = setTimeout(function fn(){
  width = parseInt(getComputedStyle(box).left)
  if(width<100){
     box.style.width = width + 5 + "px"
     setTimeout(fn,200)
  }else{
     clearTimeout(timer)
  }
},200)

2. setInterval():使用定时器setInterval()来实现动画效果，使用clearInterval()来清除定时器

let box = document.getElementById("box)
let width
let timer = setInterval(function fn(){
  width = parseInt(getComputedStyle(box).left)
  if(width<100){
     box.style.width = width + 5 + "px"
  }else{
     clearInterval(timer)
  }
},200)

好一点的回答

使用requestAnimationFrame()：只需要传入一个回调函数，使用cancelAnimationFrame()关闭动画。执行的频率不行更改。

let box = document.getElementById("box)
let width
let timer = requestAnimationFrame(function fn(){
  width = parseInt(getComputedStyle(box).left)
  if(width<100){
     box.style.width = width + 5 + "px"
     requestAnimationFrame(fn)
  }else{
     cancelAnimationFrame(timer)
  }
})

requestAnimationFrame()和定时器的对比

1. requestAnimationFrame()会有浏览器兼容性问题。
2. requestAnimationFrame()可以自动匹配设备帧率来展示动画（120帧就每秒执行120次）。
3. requestAnimationFrame()高性能且不会出现动画卡顿。
4. 使用定时器来控制动画效果，会出现卡顿的问题。(这里会被问到：执行定时器里面的函数的延迟是准确的吗，回答：不是，这个涉及到EventLoop的问题(可以专门去了解一下这个)，定时器是宏任务，前面可能会有按执行顺序执行的代码，微任务，宏任务来阻塞它。)