JavaScript requestAnimationFrame动画详解

2023年6月10日下午10:18 • JavaScript

下面是详细讲解“JavaScript requestAnimationFrame动画详解”的完整攻略。

一、什么是requestAnimationFrame

requestAnimationFrame是一个用于浏览器动画渲染的API，它可以被用来优化动画循环的性能。相较于使用setTimeout或setInterval方法，使用requestAnimationFrame可以避免一些性能弱化问题。requestAnimationFrame将告诉浏览器，你想要执行一些操作，并且当浏览器准备好更新屏幕时，你希望这些操作得到执行。

二、使用方法

requestAnimationFrame接受一个callback函数作为参数，并在下一次动画帧更新前调用这个函数，函数的执行时间会为浏览器刷新屏幕留下很小的时间。

// 示例代码1
function animate() {
  // 添加代码实现动画的算法
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

在上述代码中，animate是一个用于创建一个动画的函数。requestAnimationFrame方法将会在下一次动画帧更新前递归调用animate函数。

三、动画的循环实现

在实现动画循环时，我们需要用到变量来存储动画的结束状态，同时需要用到一个变量来标记当前是否结束动画循环。

// 示例代码2
let stopAnimation = false;

// 开始动画循环
function animate() {
  // 添加代码实现动画的算法

  // 判断是否结束动画循环
  if (!stopAnimation) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

// 停止动画循环
function stop() {
  stopAnimation = true;
}

在上述代码中，我们定义了一个变量stopAnimation，在animate函数中判断它是否为false，如果为false则递归调用requestAnimationFrame(animate)完成动画循环，否则停止动画循环。

四、注意事项

在使用requestAnimationFrame时，一定要注意以下几点：

该方法在每秒的更新频率上是有限制的，例如在IE10/IE11中，更新频率为60FPS（每秒钟60次），而在chrome和Firefox中，更新频率可以高达144FPS。
requestAnimationFrame方法对于用户在本机电脑上的帧率是否很高，都将使动画保持平滑。
避免只对浮点型数字进行动画变换，在大多数情况下，使用整数的值来执行运动和动画，能够更加优化性能。
在控制CSS或SVG属性的更改时，请使用变形（transform）属性，因为它们在GPU中更快处理。

五、示例

下面通过两个简单的示例来展示如何使用requestAnimationFrame：

1. 立方体旋转

使用CSS 3D变换来旋转一个立方体：

// 示例代码3
const cube = document.querySelector('.cube');

function animate() {
  cube.style.transform = 'rotateY(' + step + 'deg)';
  step++;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

在上述代码中，我们选择一个类为cube的DOM元素，并不断地将其在Y轴上旋转，实现了一个简单的动画效果。

2. 气球弹跳

使用SVG属性来实现一个气球的弹跳效果：

// 示例代码4
const balloons = document.querySelectorAll('.balloon');

let offset = 0;
let speed = 0.1;

function animate() {
  for (let i = 0; i < balloons.length; i++) {
    const balloon = balloons[i];
    const x = balloon.cx.baseVal.value;
    const y = balloon.cy.baseVal.value;

    balloon.cy.baseVal.value = y + Math.sin(offset) * 10;
    balloon.setAttribute('transform', `translate(${(Math.sin(offset) * 50)}, 0)`);
    offset += speed;
  }

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

在上述代码中，我们选择多个元素并不断地对其位置和变形进行变换，实现了一个气球弹跳的效果。