使用requestAnimationFrame实现js动画性能好

使用requestAnimationFrame实现js动画的优点是可以避免过多使用setTimeout或setInterval造成的页面卡顿、CPU过度占用等问题，从而保证动画的流畅度和性能。以下是具体操作步骤：

准备工作

首先需要在代码中声明一个全局变量 requestId 用于记录动画的请求ID。然后编写动画函数，此函数需要接收一个时间参数。

let requestId;
function animate(time) {
   // animation code goes here
}

实现动画

在动画函数中，需要添加动画效果，利用requestAnimationFrame函数以每帧60帧的速度去执行动画。

function animate(time) {
  // 计算每一帧之间的变化
  let delta = time - lastTime;

  // 绘制动画效果
  // ...

  // 更新上一次时间
  lastTime = time;

  // 请求下一帧
  requestId = requestAnimationFrame(animate);
}

注意：动画函数会一直运行，直到调用 cancelAnimationFrame(requestId) 停止它。

示例说明

示例1 - 移动动画

let requestId;
let element = document.querySelector('#box');
let start = null;
let duration = 1000; // 持续时间 1s
let endPos = 500; // 结束位置

function animate(time) {
    if (start === null) start = time;
    let progress = time - start;
    let newPos = progress / duration * endPos; // 计算当前位置

    // 修改元素位置
    element.style.transform = `translateX(${newPos}px)`;

    if (newPos < endPos) {
      // 请求下一帧
      requestId = requestAnimationFrame(animate);
    }
}

// 启动动画
requestId = requestAnimationFrame(animate);

该例子用于实现一个元素在一秒钟内沿X轴移动到指定位置。在动画函数中通过计算时间的差值来实现随时间变化的动画效果，同时利用requestAnimationFrame函数实现动画的流畅运行。

示例2 - 缓动动画

let requestId;
let element = document.querySelector('#box');
let start = null;
let duration = 1000; // 持续时间 1s
let endPos = 500; // 结束位置
let easing = function(progress) { // 缓动函数
  return Math.pow(progress, 2);
};

function animate(time) {
    if (start === null) start = time;
    let progress = time - start;
    let newPos = easing(progress / duration) * endPos; // 计算当前位置

    // 修改元素位置
    element.style.transform = `translateX(${newPos}px)`;

    if (newPos < endPos) {
      // 请求下一帧
      requestId = requestAnimationFrame(animate);
    }
}

// 启动动画
requestId = requestAnimationFrame(animate);

该例子用于实现一个元素缓慢启动，在一秒钟内加速到指定位置。通过定义缓动函数，可以在动画函数中使用该函数计算出当前位置。与示例1类似，利用requestAnimationFrame函数保证动画的流畅运行。