问题场景
咱们前端工程师啊，在做项目的时候，动画效果那是必不可少的。比如说，一个按钮点击之后要平滑地变大，或者一个菜单展开的时候要有过渡效果。但是呢，实现动画可不是一件容易的事儿。如果动画做得不好，就会出现卡顿、掉帧的情况，用户体验那是相当糟糕。就好比你玩游戏，画面一卡一卡的，那还能玩得下去吗？
在 React 里做动画，要是用传统的 setInterval 或者 setTimeout，就会有性能问题。因为这俩货可不管浏览器的刷新频率，自己该啥时候执行就啥时候执行，很容易和浏览器的渲染节奏对不上，导致动画不流畅。而且，在页面不可见的时候，它们还会继续执行，浪费资源。所以啊，我们就需要一个更高效的方法来实现动画，这时候 requestAnimationFrame 就闪亮登场啦！
技术原理
requestAnimationFrame API
requestAnimationFrame 是浏览器提供的一个 API，它专门用来处理动画。简单来说，它会告诉浏览器：“嘿，我这儿有个动画要执行，等你下一次重绘之前，帮我把这个动画更新一下。”这样就保证了动画的更新和浏览器的重绘是同步的，不会出现卡顿的情况。而且，当页面不可见的时候，requestAnimationFrame 会自动暂停，节省资源。
useState 和 useEffect Hooks
在 React 里，useState 和 useEffect 是两个非常重要的 Hooks。useState 用来创建和管理组件的状态，就好比一个小仓库，你可以把数据存进去，也可以取出来。useEffect 则是用来处理副作用，比如在组件挂载、更新或者卸载的时候执行一些操作。在做动画的时候，我们可以用 useState 来存储动画的状态，比如元素的位置、大小等，用 useEffect 来启动和停止动画。
代码示例
下面是一个简单的例子，实现一个方块从左到右移动的动画。
import React, { useState, useEffect } from 'react';
const AnimatedBox = () => {
// 使用 useState 来存储方块的位置
const [position, setPosition] = useState(0);
useEffect(() => {
// 定义一个动画函数
const animate = () => {
// 更新方块的位置
setPosition(prevPosition => prevPosition + 1);
// 如果方块还没移动到指定位置，继续请求下一帧动画
if (position < 200) {
requestAnimationFrame(animate);
}
};
// 启动动画
requestAnimationFrame(animate);
// 组件卸载时清除动画
return () => {
// 这里暂时不需要做什么，因为 requestAnimationFrame 会自动暂停
};
}, [position]);
return (
<div
style={{
width: '50px',
height: '50px',
backgroundColor: 'blue',
position: 'relative',
left: `${position}px`
}}
/>
);
};
export default AnimatedBox;
代码解释：
useState(0)：创建一个状态position，初始值为 0，表示方块的初始位置。useEffect：在组件挂载时启动动画。animate函数是动画的核心，它会不断更新position的值，然后请求下一帧动画。当方块移动到指定位置（这里是 200px）时，动画停止。return () => {...}：这是useEffect的清理函数，在组件卸载时执行。虽然requestAnimationFrame会自动暂停，但为了代码的完整性，我们还是保留了这个清理函数。<div>：渲染一个蓝色的方块，它的位置由position状态决定。
对比效果
| 实现方式 | 性能 | 流畅度 | 资源占用 |
|---|---|---|---|
| setInterval | 低，可能会导致页面卡顿 | 差，容易出现掉帧 | 高，页面不可见时仍会执行 |
| requestAnimationFrame | 高，与浏览器渲染同步 | 好，动画流畅 | 低，页面不可见时自动暂停 |
从这个表格可以看出，requestAnimationFrame 在性能、流畅度和资源占用方面都比 setInterval 要好得多。
面试大白话回答方法
面试官要是问你：“在 React 里咋用 requestAnimationFrame 做高效动画渲染，结合 useState 和 useEffect 实现简单动画的思路是啥？”
你可以这么说：“面试官您好！requestAnimationFrame 是个好东西，它能让动画和浏览器的重绘同步，这样动画就不会卡顿。在 React 里用它做动画，我们得结合 useState 和 useEffect。
首先，用 useState 来存动画的状态，比如元素的位置、大小啥的。然后，在 useEffect 里启动动画。在 useEffect 里面，我们定义一个动画函数，在这个函数里更新 useState 存的状态，然后再用 requestAnimationFrame 请求下一帧动画。要是动画还没结束，就一直这么循环下去。最后，在 useEffect 的清理函数里，我们可以做一些收尾工作，比如停止动画。这样就能实现一个简单又高效的动画啦！”
总结
通过 requestAnimationFrame、useState 和 useEffect 的结合，我们可以在 React 里实现高效、流畅的动画。requestAnimationFrame 保证了动画和浏览器渲染的同步，useState 用来管理动画的状态，useEffect 用来启动和停止动画。这种方法不仅性能好，而且代码简洁，容易维护。
扩展思考
- 除了位置动画，还可以用这种方法实现大小、透明度等动画效果。你只需要在
useState里存储相应的状态，然后在动画函数里更新这些状态就行了。 - 可以结合 CSS 动画和
requestAnimationFrame，实现更复杂的动画效果。比如，先用 CSS 动画实现一些简单的过渡效果，再用requestAnimationFrame实现一些动态的交互效果。 - 在实际项目中，可能会有多个动画同时运行。这时候，你可以把动画逻辑封装成自定义 Hooks，提高代码的复用性。 接着上文，我将从更多维度进行拓展，深入探讨动画优化、复杂场景应用等内容，带你进一步掌握相关技术。
4. 复杂动画场景实战
在实际项目中，我们常常会遇到更为复杂的动画需求，比如多个元素联动的动画、具有弹性效果的动画，或者是需要响应不同用户操作触发的动画。接下来，咱们就通过几个具体案例，看看如何用 requestAnimationFrame 来应对这些复杂场景。
案例一：多个元素联动动画
假设我们要实现一个太阳系行星围绕太阳旋转的动画，多个行星同时以不同的速度和半径进行圆周运动。
import React, { useState, useEffect } from'react';
const SolarSystem = () => {
// 定义太阳的位置
const sunX = 150;
const sunY = 150;
// 存储行星的状态，每个行星包含位置、角度、速度等信息
const [planets, setPlanets] = useState([
{
x: sunX + 50,
y: sunY,
angle: 0,
speed: 0.01
},
{
x: sunX + 100,
y: sunY,
angle: 0,
speed: 0.008
}
]);
useEffect(() => {
const animate = () => {
// 遍历每个行星，更新其位置和角度
setPlanets(prevPlanets => prevPlanets.map(planet => {
const newAngle = planet.angle + planet.speed;
const newX = sunX + Math.cos(newAngle) * (planet.x - sunX);
const newY = sunY + Math.sin(newAngle) * (planet.y - sunY);
return {
...planet,
x: newX,
y: newY,
angle: newAngle
};
}));
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);
return () => {
// 组件卸载时清理
};
}, [planets]);
return (
<div style={{ width: '300px', height: '300px', position:'relative' }}>
<div
style={{
width: '30px',
height: '30px',
borderRadius: '50%',
backgroundColor: 'yellow',
position: 'absolute',
left: `${sunX}px`,
top: `${sunY}px`
}}
/>
{planets.map((planet, index) => (
<div
key={index}
style={{
width: '10px',
height: '10px',
borderRadius: '50%',
backgroundColor: `hsl(${index * 30}, 100%, 50%)`,
position: 'absolute',
left: `${planet.x}px`,
top: `${planet.y}px`
}}
/>
))}
</div>
);
};
export default SolarSystem;
在这个例子中，我们用 useState 存储多个行星的状态数组，useEffect 里的 animate 函数会遍历数组，根据每个行星的速度和角度计算新位置，然后通过 requestAnimationFrame 持续更新，实现多个元素联动的圆周运动动画。
案例二：弹性动画效果
弹性动画在交互设计中很常见，比如按钮点击后的回弹效果。我们可以利用物理学中的弹簧运动公式来模拟这种效果。
import React, { useState, useEffect } from'react';
const ElasticButton = () => {
// 按钮的初始位置和目标位置
const initialY = 0;
const targetY = 100;
// 存储按钮的当前位置和速度
const [buttonY, setButtonY] = useState(initialY);
const [velocity, setVelocity] = useState(0);
// 弹簧的弹性系数和阻尼系数
const springConstant = 0.1;
const damping = 0.9;
useEffect(() => {
const animate = () => {
// 计算加速度
const acceleration = (targetY - buttonY) * springConstant;
// 更新速度
const newVelocity = (velocity + acceleration) * damping;
// 更新位置
const newButtonY = buttonY + newVelocity;
setButtonY(newButtonY);
setVelocity(newVelocity);
if (Math.abs(newButtonY - targetY) < 0.1) {
// 当接近目标位置时，停止动画
setButtonY(targetY);
setVelocity(0);
} else {
requestAnimationFrame(animate);
}
};
requestAnimationFrame(animate);
return () => {
// 组件卸载时清理
};
}, [buttonY, velocity]);
return (
<button
style={{
position: 'absolute',
top: `${buttonY}px`,
left: '50px',
padding: '10px 20px'
}}
>
点击我
</button>
);
};
export default ElasticButton;
这里通过 useState 记录按钮位置和速度，useEffect 里依据弹簧运动原理计算加速度、更新速度和位置，利用 requestAnimationFrame 实现弹性动画效果，当接近目标位置时停止动画。
5. 动画性能优化与调试
虽然 requestAnimationFrame 已经很高效了，但在复杂动画场景下，还是可能出现性能问题。下面给大家分享一些优化和调试的小技巧。
减少重绘和回流
动画过程中频繁的重绘和回流会严重影响性能。尽量避免在动画过程中修改元素的布局属性（如 width、height、margin 等），可以通过 transform 属性来实现位移、旋转和缩放等效果，因为 transform 不会触发回流，只会触发合成层的重绘，性能更好。
比如，将之前方块移动动画中的 left 属性改为 transform: translateX()：
import React, { useState, useEffect } from'react';
const AnimatedBox = () => {
const [position, setPosition] = useState(0);
useEffect(() => {
const animate = () => {
setPosition(prevPosition => prevPosition + 1);
if (position < 200) {
requestAnimationFrame(animate);
}
};
requestAnimationFrame(animate);
return () => {
// 组件卸载时清除动画
};
}, [position]);
return (
<div
style={{
width: '50px',
height: '50px',
backgroundColor: 'blue',
position:'relative',
// 使用 transform 替代 left
transform: `translateX(${position}px)`
}}
/>
);
};
export default AnimatedBox;
利用浏览器开发者工具调试
浏览器的开发者工具是我们调试动画性能的好帮手。在 Chrome 中，可以打开“Performance”面板，录制动画运行过程，分析帧率、CPU 占用等数据，找出性能瓶颈。如果发现动画掉帧严重，可以检查是否有不必要的重绘和回流，或者动画逻辑是否过于复杂。
6. 与其他技术结合使用
requestAnimationFrame 还可以和很多其他前端技术结合，创造出更丰富的效果。
与 GSAP 结合
GSAP（GreenSock Animation Platform）是一个强大的动画库，提供了很多高级动画功能。我们可以将 requestAnimationFrame 与 GSAP 结合，利用 GSAP 的 ease 函数（动画缓动效果）来实现更自然的动画过渡。
首先安装 GSAP：npm install gsap
然后使用：
import React, { useEffect } from'react';
import gsap from 'gsap';
const GSAPAnimatedBox = () => {
useEffect(() => {
const box = document.querySelector('.gsap-box');
const animate = () => {
gsap.to(box, {
x: 200,
duration: 2,
ease: 'power2.out'
});
};
requestAnimationFrame(animate);
return () => {
// 组件卸载时清理
};
}, []);
return (
<div className="gsap-box" style={{ width: '50px', height: '50px', backgroundColor: 'green' }} />
);
};
export default GSAPAnimatedBox;
这里借助 GSAP 的 to 方法设置动画属性，requestAnimationFrame 启动动画，利用 GSAP 的缓动函数让动画过渡更丝滑。
与 React Spring 结合
React Spring 是一个基于弹簧物理模型的动画库，能创建出非常自然的动画效果。将它与 requestAnimationFrame 结合，可以更好地控制动画的交互性和动态效果。
安装 React Spring：npm install react-spring
使用示例：
import React from'react';
import { useSpring, animated } from'react-spring';
const SpringAnimatedBox = () => {
const springProps = useSpring({
to: { x: 200 },
from: { x: 0 },
config: { duration: 1500 }
});
return (
<animated.div style={springProps} className="spring-box" />
);
};
export default SpringAnimatedBox;
React Spring 内部也利用了类似 requestAnimationFrame 的机制来保证动画流畅，通过它的 Hook 可以方便地定义动画效果，和 requestAnimationFrame 相辅相成。
7. 未来趋势与展望
随着前端技术的不断发展，动画相关的技术也在持续演进。WebGL 技术越来越成熟，它能实现更复杂、更炫酷的 3D 动画效果，并且性能非常出色。虽然目前 WebGL 的使用门槛相对较高，但未来可能会出现更多简单易用的工具和库，让我们能更轻松地将其与 requestAnimationFrame 结合，创造出前所未有的动画体验。
另外，随着浏览器对新特性的支持不断增强，像 CSS Houdini 这样的技术，允许开发者突破 CSS 的限制，自定义渲染规则。这也为动画开发带来了无限可能，说不定以后我们可以用更灵活的方式，结合 requestAnimationFrame 实现更加个性化的动画效果。
总之，requestAnimationFrame 作为前端动画渲染的重要工具，在 React 项目中有着巨大的应用潜力。通过不断学习和实践，结合其他技术，我们可以为用户带来越来越惊艳的动画体验。希望大家都能在动画开发的道路上越走越远，成为动画特效大神！如果在实践过程中遇到问题，欢迎在评论区交流讨论，咱们一起进步！
