Anime.js：7 万 Star 的 JavaScript 动画库，V4 版本重新定义了动画语法

Anime.js：7 万 Star 的 JavaScript 动画库，V4 版本重新定义了动画语法

Anime.js 在 GitHub 上已经拿到了 70.6K Star。

这是一款轻量级的 JavaScript 动画库，用于处理 CSS 属性、SVG、DOM 属性和 JavaScript 对象的动画。它不需要 jQuery 或其他依赖，纯原生 JavaScript 就能跑。

1、 为什么它能拿到 7 万 Star

前端动画库不少，GSAP、Framer Motion、Motion One 各有拥趸。Anime.js 的定位很明确：API 简单，但能力不简单。

看一段 V4 版本的代码就明白了：

import{animate,stagger}from'animejs';animate('.square',{x:320,rotate:{from:-180},duration:1250,delay:stagger(65,{from:'center'}),ease:'inOutQuint',loop:true,alternate:true});

声明式写法，链式调用，stagger 延迟动画内置支持。从一个简单的方块移动，到复杂的交错动画序列，写法上的差异不大。

2、 支持哪些能力

Anime.js V4 的工作方式是基于 ES Module 导入，按需加载，不会把整个库全量打包进去。

它覆盖的动画场景包括：

• CSS 属性动画（transform、opacity、color 等）
• SVG 路径动画和变形动画
• DOM 属性的逐帧变化
• JavaScript 对象的数值插值
• 时间线编排和 stagger 交错效果
• 缓动函数自定义

每个能力都有对应的示例代码，项目仓库里附带了一个 examples 目录，可以在本地启动预览。

3、 安装与使用

通过 npm 安装：

npminstallanimejs

V4 版本使用 ES Module 导入，只引入你需要的函数：

import{animate,scroll,timeline,stagger}from'animejs';

如果从 V3 迁移到 V4，项目仓库 Wiki 里有完整的迁移指南。

提供几个开发脚本：npm run dev进入开发模式监视文件变化；npm run build打包 ESM、UMD、CJS、IIFE 多版本；npm run test:browser启动浏览器测试。

4、 适合谁用

• 需要在前端项目里快速实现复杂动画的前端开发者
• 想做 SVG 动画但不想上重型的 GSAP 的团队
• 对代码体积敏感、希望按需加载动画库的项目
• 做交互动画原型、需要快速验证效果的设计师

作者 Julian Garnier 将项目以 MIT 协议开源，没有任何付费墙或功能限制。

• 做交互动画原型、需要快速验证效果的设计师

作者 Julian Garnier 将项目以 MIT 协议开源，没有任何付费墙或功能限制。