首页 > 文章 > 前端

JS实现动画的几种方法详解

时间：2025-09-03 18:10:29 483浏览收藏

想要在网页上实现炫酷的动画效果？本文为你深度解析JS实现动画的三种核心方法：CSS Transitions和Animations、requestAnimationFrame API以及Web Animations API (WAAPI)。CSS动画以其高性能和硬件加速的优势，适用于声明式动画，通过JS触发可实现简单的状态过渡和复杂的多步骤动画。requestAnimationFrame则能与浏览器刷新率同步，实现高性能逐帧动画，尤其适合游戏开发和需要精确控制的场景。而Web Animations API (WAAPI) 则结合了CSS的性能与JS的控制力，为开发者提供了统一的动画模型，支持创建、播放、暂停和调整动画，是现代浏览器动画的未来趋势。掌握这三种方法，助你轻松打造流畅、富有表现力的前端动画效果。

核心方法主要有三种：CSS的transition和animation由JS触发，适用于声明式动画；requestAnimationFrame实现与屏幕刷新同步的高性能逐帧动画；Web Animations API结合了CSS性能与JS控制力，支持复杂交互。

浏览器JS动画实现方式？

浏览器中实现JS动画，核心方法主要有几种：利用CSS的transition和animation属性（虽然是CSS，但常由JS触发），使用requestAnimationFrame API进行逐帧绘制，以及现代的Web Animations API (WAAPI)。每种方式都有其适用场景和独特优势，理解它们能帮助我们根据具体需求做出最佳选择。

解决方案

在前端开发中，要实现流畅、富有表现力的动画效果，我们手头有几张牌可以打。最常见也最推荐的，无非是CSS动画、requestAnimationFrame以及逐渐崭露头角的Web Animations API (WAAPI)。

1. CSS Transitions和Animations： 这大概是大家接触最早，也是最常用的动画方式。它的优势在于性能。浏览器往往能对CSS动画进行硬件加速，这意味着动画过程可以在独立的合成线程中运行，不阻塞主线程，从而减少卡顿，实现60fps的流畅效果。

Transitions (过渡): 当元素从一种状态平滑地过渡到另一种状态时使用。比如，鼠标悬停时按钮颜色变化，或者元素位置、大小的改变。你只需要定义起始和结束状态，浏览器会负责中间的补间动画。
```
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.box:hover {
    width: 150px;
    background-color: red;
}
```
通过JavaScript，我们可以动态地添加或移除CSS类来触发这些过渡。
Animations (动画): 适用于更复杂的、多步骤的、循环的动画效果。通过@keyframes规则定义动画序列中的关键帧，然后将动画应用到元素上。
```
@keyframes slideIn {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { transform: translateX(10%); opacity: 0.5; }
    100% { transform: translateX(0); opacity: 1; }
}
.element {
    animation: slideIn 1s ease-out forwards;
}
```
CSS动画非常适合那些声明式、不依赖复杂逻辑的动画。

2. requestAnimationFrame (rAF)： 当动画逻辑变得复杂，需要精确控制每一帧，或者动画效果是基于用户交互、物理引擎、数据变化时，requestAnimationFrame就成了不二之选。它告诉浏览器——“嘿，我这里有个动画要更新，等下一次浏览器重绘前通知我一下”。

工作原理： rAF的回调函数会在浏览器下一次重绘之前执行。这意味着它与浏览器的刷新率同步，通常是每秒60次（60fps）。这避免了setTimeout或setInterval可能导致的动画卡顿或跳帧问题，因为后两者无法保证与浏览器渲染周期同步，容易导致丢帧。

适用场景： 游戏开发、粒子效果、拖拽、滚动视差、或者任何需要高度定制化和高性能的动画。

let start = null;
function animate(currentTime) {
    if (!start) start = currentTime;
    const progress = currentTime - start;

    // 假设我们要让一个元素在2秒内从左移动到右
    const element = document.getElementById('myElement');
    const distance = 200; // 移动200px
    const duration = 2000; // 2秒

    if (progress < duration) {
        element.style.transform = `translateX(${(progress / duration) * distance}px)`;
        requestAnimationFrame(animate); // 继续下一帧
    } else {
        element.style.transform = `translateX(${distance}px)`; // 确保最终状态
        console.log('Animation finished!');
    }
}
requestAnimationFrame(animate);

3. Web Animations API (WAAPI)： WAAPI是CSS动画和JavaScript动画之间的一座桥梁，它允许我们用JavaScript来控制CSS动画，或者创建与CSS动画性能相当的JavaScript动画。它提供了一个统一的模型，让开发者能够以编程方式创建、播放、暂停、反转和调整动画。

优势： 结合了CSS动画的性能优势（可能硬件加速）和JavaScript的强大控制能力。你可以像操作DOM一样操作动画对象。

使用方式：

const element = document.getElementById('myElement');
element.animate([
    { transform: 'translateX(0)', opacity: 1 }, // 关键帧1
    { transform: 'translateX(200px)', opacity: 0.5 } // 关键帧2
], {
    duration: 1000, // 动画持续时间1秒
    easing: 'ease-out', // 缓动函数
    fill: 'forwards' // 动画结束后保持最终状态
});

WAAPI的出现，在我看来，正在逐渐改变我们编写复杂动画的方式。它提供了一种更语义化、更可控的动画解决方案。

CSS动画与JavaScript动画，我该如何选择？

这确实是一个老生常谈的问题，但其答案并非一成不变，而是取决于具体的场景、动画的复杂度和交互需求。在我个人看来，这更像是一种取舍和策略上的平衡。

何时偏向CSS动画？ 如果你的动画是声明式的，即仅仅是元素状态的简单改变（比如hover效果、菜单展开/收起），并且不需要复杂的逻辑控制，那么CSS动画几乎总是首选。原因很简单：

性能优越： 浏览器对CSS动画有更深入的优化，通常能利用GPU进行硬件加速，将动画任务从主线程卸载到合成线程。这意味着即使主线程被JavaScript密集计算阻塞，CSS动画也能保持流畅。
开发简洁： 对于简单的效果，几行CSS代码就能搞定，可读性高，维护起来也方便。
关注点分离： 将样式和动画逻辑放在CSS中，符合关注点分离的原则。

但CSS动画的缺点也很明显：它对复杂逻辑的控制能力较弱。你很难在CSS中实现基于用户输入、物理模拟、或者与其他数据紧密关联的动画。调试起来，尤其是多步动画，也可能不如JS那么直观。

何时选择JavaScript动画（rAF或WAAPI）？ 当动画需求变得复杂，或者需要精细的控制时，JavaScript动画的优势就凸显出来了。

精细控制： requestAnimationFrame允许你逐帧控制动画的每一个细节。你可以根据任何运行时数据（如鼠标位置、滚动距离、传感器输入）来动态调整动画的路径、速度和效果。这对于游戏、数据可视化、自定义滚动效果等场景至关重要。
复杂逻辑： JS动画可以轻松集成复杂的数学函数、物理引擎（如碰撞检测、重力模拟），实现非线性的、交互性强的动画。
状态管理： 对于需要跟踪动画状态（播放中、暂停、反转）并在不同动画之间进行协调的场景，JS提供了更强大的API和工具。WAAPI在这方面尤其突出，它提供了Animation对象，可以像操作DOM元素一样操作动画。
可访问性： JS动画可以更好地与辅助技术集成，例如，你可以通过JS控制动画的暂停/播放，以满足用户的无障碍需求。

在我看来，选择的关键在于“控制力”和“复杂性”。如果你的动画需要对过程有绝对的控制，或者动画逻辑本身就比较复杂，那么JavaScript动画是你的朋友。如果只是简单的视觉反馈，让CSS去处理吧，它会做得很好。

深入理解requestAnimationFrame：它为何是JS动画的利器？

requestAnimationFrame (rAF) 在现代前端动画领域中，确实是一把不可或缺的利器。它的出现，彻底改变了我们编写高性能、流畅JavaScript动画的方式，解决了传统setTimeout和setInterval在动画方面存在的诸多痛点。

1. 与浏览器绘制周期同步： 这是rAF最核心的优势。传统的setTimeout(fn, 16)试图模拟60fps（1000ms/60帧≈16.6ms），但它并不能保证fn在浏览器下一次重绘前执行。如果setTimeout的回调在浏览器重绘之后才执行，那么这一帧的更新就错过了，导致动画卡顿或跳帧。

而requestAnimationFrame则不同。它明确告诉浏览器：“我有一个回调函数，请在下一次浏览器重绘之前调用它。”这样，你的动画更新逻辑就能与浏览器的渲染管道完美同步，确保每一帧都能被及时渲染出来，从而实现丝滑般的60fps动画体验。在我看来，这种“合拍”是实现真正流畅动画的基石。

2. 优化CPU/GPU资源： 当你的页面或浏览器标签页处于非活动状态（比如用户切换到其他标签页），requestAnimationFrame会自动暂停执行。这极大地减少了不必要的CPU和GPU开销，节省了电量，对于移动设备尤其重要。而setInterval则会“不顾一切”地持续运行，即便用户根本看不到动画，也在白白消耗资源。这种智能的资源管理，体现了rAF对用户体验和设备性能的深思熟虑。

3. 避免丢帧与性能抖动： 由于rAF与浏览器渲染同步，它能够有效避免“丢帧”现象。即使浏览器因为某些原因（如复杂的布局计算、重绘）导致某一帧耗时较长，rAF的回调也会在下一帧的合适时机被调用，而不是盲目地在固定的时间间隔内尝试更新，从而减少了动画的抖动和不稳定性。它更像是一个“聪明”的调度器，总能在最佳时机安排动画任务。

一个简单的rAF示例： 想象我们想让一个方块沿着一条抛物线运动，这需要每一帧都计算新的位置。

const box = document.getElementById('animatedBox');
let startTime = null;
const duration = 2000; // 动画持续2秒
const amplitude = 100; // 抛物线高度
const maxTravelX = 300; // X轴最大位移

function parabolicAnimation(currentTime) {
    if (!startTime) startTime = currentTime;
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1); // 0到1的进度

    // X轴线性移动
    const currentX = progress * maxTravelX;

    // Y轴模拟抛物线（简单sin函数模拟，实际抛物线是二次函数）
    // 0到180度（Math.PI）的sin值从0到1再到0
    const currentY = -Math.sin(progress * Math.PI) * amplitude;

    box.style.transform = `translate(${currentX}px, ${currentY}px)`;

    if (progress < 1) {
        requestAnimationFrame(parabolicAnimation);
    } else {
        startTime = null; // 动画结束后重置，以便下次触发
        console.log('Parabolic animation finished.');
    }
}

// 假设我们有一个按钮来触发动画
document.getElementById('startButton').addEventListener('click', () => {
    requestAnimationFrame(parabolicAnimation);
});

这个例子展示了rAF如何通过持续的帧更新来模拟复杂的运动轨迹。每次回调都会根据当前时间计算出精确的进度，进而得出元素的最新位置。

在我看来，rAF不仅仅是一个API，它更是一种动画开发的哲学：尊重浏览器，与浏览器协作。通过将动画任务交给浏览器调度，我们能够更高效、更稳定地实现高性能的JavaScript动画，这对于构建现代、流畅的用户界面至关重要。

Web Animations API (WAAPI)：现代浏览器动画的未来趋势？

Web Animations API (WAAPI) 是一个相对较新但潜力巨大的浏览器API，它旨在弥合CSS动画的性能优势与JavaScript动画的强大控制力之间的鸿沟。在我看来，WAAPI不仅仅是一个新的API，它更代表了浏览器动画未来发展的一个重要方向——统一化、可编程化和高性能。

WAAPI的理念与优势：

统一的动画模型： WAAPI提供了一套统一的JavaScript接口，来创建、控制和检查动画。无论是原本由CSS驱动的动画，还是纯粹由JavaScript创建的动画，都可以通过WAAPI进行操作。这意味着开发者不再需要在CSS和JS动画之间来回切换思维模式，所有动画都可以在一个框架下管理。这对于大型项目和动画库的开发来说，简直是福音。
性能接近CSS动画： WAAPI设计的初衷之一就是为了让JavaScript控制的动画也能享受到浏览器底层的性能优化，包括可能的硬件加速。它允许浏览器在独立的合成线程中执行动画，就像CSS动画一样，从而减少主线程的负担，避免卡顿。在我看来，这是WAAPI最吸引人的地方之一：获得JS的控制力，不损失CSS的性能。
强大的编程控制：
- 播放控制： 你可以轻松地play(), pause(), reverse(), cancel()动画，甚至设置动画的playbackRate来加速或减慢。
- 时间轴控制： currentTime属性允许你直接跳转到动画的任何一个时间点，这对于实现交互式动画、进度条或视频播放器类型的控制非常有用。
- 事件监听： WAAPI提供了onfinish, oncancel等事件，让你能精确地在动画生命周期的关键时刻执行回调函数。
- 链式动画： 多个WAAPI动画可以轻松地串联或并行播放，构建复杂的动画序列。

WAAPI的简单示例：

让我们用WAAPI来重现一个CSS transform动画，同时展示其编程控制能力。

const box = document.getElementById('myWAAPIBox');

// 定义关键帧
const keyframes = [
    { transform: 'translateX(0) rotate(0deg)', opacity: 1, backgroundColor: 'blue' },
    { transform: 'translateX(200px) rotate(180deg)', opacity: 0.5, backgroundColor: 'red' },
    { transform: 'translateX(0) rotate(360deg)', opacity: 1, backgroundColor: 'blue' }
];

// 定义动画选项
const options = {
    duration: 2000, // 2秒
    easing: 'ease-in-out',
    iterations: Infinity, // 无限循环
    direction: 'alternate', // 动画交替反向播放
    fill: 'forwards' // 动画结束后保持最终状态
};

// 创建动画实例
const boxAnimation = box.animate(keyframes, options);

// 假设我们有一些按钮来控制动画
document.getElementById('playBtn').addEventListener('click', () => boxAnimation.play());
document.getElementById('pauseBtn').addEventListener('click', () => boxAnimation.pause());
document.getElementById('reverseBtn').addEventListener('click', () => boxAnimation.reverse());
document.getElementById('speedUpBtn').addEventListener('click', () => {
    boxAnimation.playbackRate *= 1.2; // 加速20%
    console.log('Current speed:', boxAnimation.playbackRate);
});
document.getElementById('slowDownBtn').addEventListener('click', () => {
    boxAnimation.playbackRate /= 1.2; // 减速20%
    console.log('Current speed:', boxAnimation.playbackRate);
});

// 监听动画结束事件
boxAnimation.onfinish = () => {
    console.log('Animation finished (though it is infinite in this example, it would fire on single run).');
};

这个例子展示了WAAPI如何通过animate()方法创建动画，并返回一个Animation对象，我们可以通过这个对象来完全控制动画的播放。

当前与未来： 尽管WAAPI的浏览器支持度一直在提升，但在某些老旧浏览器中可能还需要polyfill。然而，它在现代浏览器中的表现已经非常出色。在我看来，随着前端对动画效果和交互体验的要求越来越高，WAAPI无疑将成为前端工程师实现复杂、高性能动画的利器。它提供了一种更结构化、更具扩展性的动画解决方案，让我们可以用更少的代码实现更强大的动画效果。如果你的项目需要高度可控且性能优异的动画，我强烈建议你深入学习和尝试WAAPI。

今天关于《JS实现动画的几种方法详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

CSS动画 requestAnimationFrame JS动画动画性能 WebAnimationsAPI