功能对比

概览

有如此多的 JavaScript 库可供选择，可能很难决定哪个最适合您的项目。

两个最大的动画库是 Motion 和GSAP.

这两个库的根本区别在于 GSAP 纯粹在 requestAnimationFrame (rAF) 上运行动画，而 Motion 具有独特的混合引擎，可以通过 rAF 和原生浏览器 API（如 Web Animations API (WAAPI) 和 ScrollTimeline）运行动画。

原生浏览器 API 的优势

使用 WAAPI 和 ScrollTimeline 的能力为 Motion 带来了一些独特的优势，特别是更小的包大小和硬件加速动画。

包大小

Motion 的迷你版 animate() 只有 2.3kb，而其功能齐全的混合版 animate() 函数为 18kb。相比之下，GSAP 大约为 23kb。

此外，GSAP 不支持 tree-shaking，这意味着使用其库的任何部分都会导入所有内容。而使用 Motion，您仅使用导入的部分。

硬件加速

“硬件加速”意味着在主 JavaScript 线程之外（通常在 GPU 上）运行动画。这意味着如果您的应用程序正在执行繁重的工作，动画仍将保持流畅。

您可能已经知道，为了获得最佳动画性能，您应该只动画 opacity 和 transform，因为这些样式不会触发布局或绘制，因为它们完全由浏览器的合成器处理。如今，filter 和 clipPath 也是如此。

这些值可以通过硬件加速动画获得额外的性能提升，因为动画本身可以在主线程之外运行。这意味着，如果浏览器正忙于计算或渲染，您的动画仍将保持流畅。

为了说明这一点，在以下示例中，左侧的球使用 Motion 动画，右侧的球使用传统的动画库动画。按“阻止 JavaScript”按钮以阻止 JS 执行两秒钟

在大多数浏览器中，即使网站变得无响应，左侧的球仍将继续以 60fps 的速度动画。

值插值

值插值是混合两个值的过程。例如，将 1 和 2 以 0.5 插值将返回 1.5。随时间插值是大多数动画的基础。

插值数字很便宜，无论是在计算方面还是在包大小方面。但是动画可能发生在各种值之间，例如阴影 10px 10px 5px red 和 0px 0px 2px rgba(0, 0, 0, 0.2)，而这些复杂的值可能会更昂贵。

迷你版 animate 包大小节省的很大一部分来自不需要包含此代码。

因此，支持在不同值类型之间进行动画处理，例如 rgba 和 hsla，或 px 和 % 或从 CSS 函数（如 calc()、minmax() 或 var()）计算出的值。

对比表格

此表比较了 Motion 的迷你版和完整版 animate 函数与 GSAP 的 gsap 对象。

图例

• ✅ 支持

• ❌ 不支持

• ⏩ 支持依赖于现代浏览器功能

• 🚧 开发中

• ⚠ 部分支持

• ⚛️ 仅限 React/Vue

注意： 虽然此列表很详尽，但它侧重于核心库功能。GSAP 提供了大量的额外付费插件除了基础 GSAP 库之外。