js动画

「这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」

最近的h5页面比较多，产品、交互、设计也开始慢慢的需要更多的交互动效，项目慢慢变得复杂了起来，我也在开发过程中，对动画有了一点小理解。

下面有css实现的动画，也有js实现的动画，说到js实现动画，可能我们大多数人想到的是用setTimeout，或者setInterval吧，但有个api实现动画，会减少cpu，gpu和内存使用量。

requestAnimationFrame

告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

• 下一次重绘之前更新动画帧所调用的函数(回调函数执行次数通常是每秒60次，大多数屏幕渲染的时间间隔是每秒60帧。)。该回调函数会被传入DOMHighResTimeStamp参数，该参数与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻。

开始动画

下面有个mdn的基础使用

const element = document.getElementById('some-element-you-want-to-animate');
let start;

function step(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;

  //这里使用`Math.min()`确保元素刚好停在200px的位置。
  element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';

  if (elapsed < 2000) { // 在两秒后停止动画
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

停止动画

方法一

可以看到，上面有一种停止动画的方法，就是添加一个判断条件，如果时间超过2000后，就不会走进那个执行函数的方法里，自然就停止动画了。

方法二

当然，它也给了停止的api。requestAnimationFrame会有个返回值，一个long的整数，请求ID，是回调列表中的唯一标识，非零。可以传这个唯一值给window.cancelAnimationFrame()用来取消回调函数。

控制时间执行

如果我们想要执行得更快可以吗？不行，因为这个每16ms执行一次是屏幕刷新的频率，设置再快也没有意义，但我们想要执行的更慢可以吗？其实也是不行的，函数执行就这个时间，但是我们可以通过较少动画执行的函数来感觉动画变慢。

下面就是让上一次执行的时间和下一次执行的时间间隔来操作渲染动画移动

const speed = 50
render(){
    const curTime = new Date().getTime();
    if (curTime - this.lastTime >= speed) {
        this.move()
        this.lastTime = curTime;
    }
}

兼容

如果我们需要做一些兼容性的处理，可能我们需要做以下的处理

 const requestAnimation = window.requestAnimationFrame
      || window.webkitRequestAnimationFrame
      || window.mozRequestAnimationFrame
      || window.oRequestAnimationFrame
      || window.msRequestAnimationFrame;

然后在直接使用 requestAnimation