几行代码就丝滑：AI 友好的 anime.js v4

给网页加动画，常见两条路：手写一堆 CSS keyframes，或者引入 GSAP 这类重量级方案。最近有开发者在 X 上推荐了老牌但常被低估的 anime.js，一句「直接丢进 Claude Code 或者 Codex 就能用」引发不少讨论。本文基于 anime.js 仓库快照（v4.5.0）拆解这个大版本重写后的动画引擎：它凭什么丝滑，又凭什么对 AI 编码友好。

一、anime.js 是什么：轻量但全能的 JS 动画引擎

官方给的一句话定位：快速、多用途、轻量的 JavaScript 动画库，API 简单却强大。它能动的东西覆盖面极广：

CSS 属性：颜色、位置、大小、透明度、变换，几乎所有 CSS 都能动
SVG：路径描边（stroke-dashoffset 动画）、形变、图形属性
DOM 属性：attribute 的数值变化
JavaScript 对象：任意对象的数值属性，可驱动 Canvas、Three.js 这类非 DOM 渲染

CSS 动画只能动 CSS 属性，anime.js 动的是「任何数值」，这是它能给 Canvas、WebGL 渲染供能的根本原因。

二、v4 是一次架构级重写：模块化、ESM、tree-shaking

当前版本 v4.5.0。v4 不是小升级，而是对整个库的重写。拉仓库对比老版，变化巨大。

anime.js v4 模块化架构：src 模块、exports 导出与打包结果

1. ESM 优先，模块化导出

package.json 的 exports 字段暴露了一堆子模块：

text

./timer          计时器
./animation      动画核心
./timeline       时间轴
./animatable     可动画对象
./draggable      拖拽
./scope          作用域
./engine         引擎
./events         事件
./svg ./text ./waapi ./easings ./adapters/three 等

这意味着 tree-shaking 友好：只用 animate，打包工具就会把 draggable 之类剔除。老版 anime.js 是整体大文件，v4 是真正的模块化。体积实测：全量 bundle min 后约 118KB、gzip 约 41KB，按需引入后更小。

2. src 目录：17 个职责清晰的模块

text

adapters/    属性适配器       animatable/  可动画对象
animation/   动画核心         core/        核心工具
draggable/   拖拽交互         easings/     缓动函数
engine/      引擎循环         events/      事件系统
layout/      布局计算         scope/       作用域
svg/         SVG 专用         text/        文字动画
timeline/    时间轴           timer/       计时器
types/       TypeScript 类型  utils/       工具
waapi/       Web Animations API 集成

每个目录一个职责，维护、贡献、AI 理解都更容易。

3. 原生 Web Animations API 集成

src 里的 waapi/ 目录说明 v4 接入了浏览器原生动画引擎：DOM 动画可以交给浏览器底层执行，性能更好，主线程压力更小。

三、为什么「丢给 Claude Code 就能用」

一个 animate() 调用驱动一切数值：代码示例与执行链路

1. API 简单且声明式

import { animate, stagger } from 'animejs';

animate('.box', {
  x: 300,
  rotate: 180,
  duration: 800,
  delay: stagger(100),
  loop: true,
  ease: 'inOutElastic(1, .6)'
});

一个 animate(目标, 参数) 调用搞定，目标可以是选择器、DOM 元素或对象，签名极其一致。声明式加简单签名，AI 一看就懂，生成的代码几乎不会错。

2. 官方示例库丰富

仓库 examples/ 目录有 24 个完整示例，覆盖 stagger 交错、draggable 拖拽、timeline 时间轴、svg-line-drawing 描边、canvas-2d、threejs、onscroll-sticky 滚动响应、text 文字动画等场景。这些示例是 AI 最好的学习材料：让 Claude Code「做个交错淡入」，它能直接参考这些示例生成对的代码。

3. TypeScript 原生

v4 用 TypeScript 重写，类型定义完整。Claude Code、Cursor、Copilot 这类工具能从类型推断出正确的 API 用法，减少幻觉。类型是 AI 理解 API 的最佳锚点。

4. 零依赖、纯 vanilla

package.json 里 dependencies 为空（three 只作为 three 适配器的可选 peer 依赖）。不存在「要不要装 jQuery」「要不要配 React 适配器」的问题，任何项目 npm install animejs 即用。

四、核心能力逐个看

基础动画：animate 把元素从 A 状态动到 B 状态，支持几乎所有可量化属性
时间轴：timeline 编排多个动画的先后、重叠、并行，examples 里有 timeline-seamless-loop（无缝循环）和 timeline-50K-stars（5 万颗粒子的压测演示）
交错动画：stagger 让一组元素错开延迟依次进入，advanced-grid-staggering 展示网格高级交错
拖拽：内置 draggable 模块，examples 有无限轮播与吸附轮播示例，一个库就能做完整轮播组件
SVG：路径描边、图表动画（svg-graph），数据可视化和图标动画的主场
滚动驱动：onscroll-sticky、onscroll-responsive-scope，现代网页滚动叙事效果的核心
文字动画：text 模块，逐字动画、打字机效果
Canvas 与 Three.js：canvas-2d 和 threejs 两个示例证明它不只能动 DOM 和 SVG，还能驱动 WebGL 渲染

五、和 GSAP 怎么选

做 Web 动画绕不开 GSAP 这个标杆。先说清一个变化：GSAP 已归入 Webflow 旗下，自 2025 年 4 月起全部插件免费商用，过去「部分插件收费」的顾虑已经不存在。两者的取舍更多在别处：

	anime.js v4	GSAP
协议	MIT	免费商用（Webflow 旗下）
API 风格	声明式，签名统一	功能丰富，学习曲线更陡
性能	WAAPI 集成，DOM 动画有加成	行业标杆级
生态	中等	极大，事实标准
AI 友好	简单 API、完整类型、24 个示例	API 更复杂，AI 出错率更高
适合	中轻量动画、AI 生成、快速原型	复杂专业动画、商业级大项目

GSAP 是专业动画工程师的核武器；anime.js 是「80% 场景的 80% 解法」：简单、免费、够用、AI 友好。对多数 Web 项目和 AI 生成场景，anime.js 的性价比更高。

六、三步上手

1. 安装

bash

npm install animejs
# 或 pnpm add animejs / yarn add animejs

2. 按需导入

import { animate, stagger, createTimeline } from 'animejs';

只用 animate 就只打包相关代码，v4 的 ESM 风格对打包器友好。

3. 一个完整的交错淡入

import { animate, stagger } from 'animejs';

// 列表项逐个从下淡入
animate('.list-item', {
  opacity: [0, 1],
  translateY: [20, 0],
  duration: 600,
  delay: stagger(80),   // 每个错开 80ms
  ease: 'out(3)'
});

几行代码，专业级动画。实操中在 Claude Code 里直接说：「用 anime.js 给页面的 .card 元素加交错淡入，从下方 30px 进入，每项错开 100ms，缓动用 elastic」，它就能生成上面的代码。声明式 API 加丰富示例，AI 几乎不会生成错。

七、适用场景与注意事项

推荐使用：Web 产品要加流畅 UI 动画；用 AI 编码想让动画一步到位；不想引入过重的依赖；要做 SVG 描边、交错、滚动、拖拽；商用项目要协议干净。

注意四点：

v4 是大版本重写，v3 代码不能直接升级，老项目迁移要改 API；新项目直接上 v4。
文档看官方站 animejs.com，仓库 examples/ 是最好的实战参考。
极端复杂动画（企业级滚动叙事、复杂 SVG 形变、物理模拟）GSAP 的插件生态仍更强，anime.js 覆盖大部分常规场景。
性能看目标：动 DOM 用 transform 和 opacity 走 GPU 加速，动 Canvas 或 WebGL 用对象数值，WAAPI 集成对 DOM 动画有加成。

八、它背后的趋势

anime.js 的 v4 重写和 AI 友好定位踩中两个趋势。其一，「AI 能不能正确用」正在成为选库的新维度：以前看功能、文档、star 数，现在还要看 API 简不简单、类型全不全、示例多不多，符合这些特征的库在 AI 编码时代有天然优势。其二，轻量加模块化加 tree-shaking 已成前端库标配，v4 从整体大文件改成十几个模块的 ESM 导出，正是为了让用户只为用到的功能买单。

小结

anime.js v4 是一个轻量、全能、对 AI 友好的 JS 动画引擎：CSS、SVG、Canvas、Three.js 都能动，模块化对 tree-shaking 友好，API 简单到一句话就能让 AI 生成可用代码。很多人对它的印象还停留在 v3 老版本，不知道 v4 已经是现代化的模块化引擎。下次需要动画，不妨先试试它，几行代码可能就是你要的高级感和丝滑。

仓库地址：https://github.com/juliangarnier/anime ，npm 包名 animejs，MIT 协议，当前版本 v4.5.0。

字节笔记本