Anime.js：轻松实现 JavaScript 动画效果
70,562 星标
还记得以前在网站上创建流畅动画需要使用复杂的 CSS 和 jQuery 变通方案吗？现在有了更简单的方法——Anime.js。该库已经获得了超过 64,000 名开发者的信赖（基于 GitHub stars），原因如下。
Anime.js 是什么？谁适合使用？
Anime.js 是一个轻量级（压缩后仅约 21 KB）的 JavaScript 引擎，用于创建精美的动画效果。它支持：
- CSS 属性
- SVG 属性
- DOM 元素
- JavaScript 对象
如果你是一名前端开发者、设计师，或者只是喜欢让界面变得生动有趣的人——这个工具正是为你准备的。那些厌倦了 GSAP 的复杂性或 CSS 动画局限性的人会尤其欣赏它。
立即尝试 Anime.js 的 5 个理由
- 简洁的 API — 仅需几行代码即可为元素添加动画：
anime({
targets: '.square',
translateX: 250,
rotate: '1turn',
duration: 1500
});
- 灵活的时间线控制 — timeline() 函数让你创建“波浪”效果：
delay: stagger(100, {from: 'center'})
-
30+ 内置缓动函数 — 从标准的 easeInOutQuad 到奇特的 WfJFnW。
-
完全兼容 — 可与现代框架（React、Vue）和原生 JS 配合使用。
-
性能优异 — 动画基于 requestAnimationFrame 运行，保持页面响应流畅。
底层原理是什么？
Anime.js 采用现代化的动画方法：
- 通过方法链式调用组合动画
- 通过 CSS transforms 和 opacity 优化渲染
- 支持 SVG 变形
- 自定义值追踪
有趣的是，这个库非常轻量，甚至可以通过 WebView 嵌入到移动应用中。
实际应用场景有哪些？
以下是一些实际应用场景：
- 交互式产品展示
- 游戏界面
- 动画图表和信息图表
- 滚动效果（滚动触发动画）
- 按钮和表单的微动画
从版本 3 迁移到 4
对于已经在使用 Anime.js 的人来说，好消息是——迁移到 v4 相当简单。主要变化包括：
- 新的模块化导入（ES modules）
- 改进的 TypeScript 支持
- 优化的 API
完整的迁移指南可在项目 Wiki 中查看。
值得一试吗？
绝对值得，如果：
✅ 你需要复杂动画但不想编写额外代码 ✅ 时间线控制对你很重要 ✅ 你想让 SVG 图形动起来
入门很简单——通过 npm 安装：
npm install animejs
或通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
动画愉快！🚀
附注：项目作者 Julian Garnier 自 2016 年以来一直在维护这个库，你可以通过GitHub Sponsors支持他的工作。
相关项目