轻量级动画引擎Anime.js迎来V4大版本更新

摘要

Anime.js 是一个轻量、快速、多面手的 JavaScript 动画引擎，一套简单的 API 就能同时驱动 CSS 属性、SVG、DOM 属性和普通 JS 对象的动画。V4 是一次彻底的架构升级：从单一的 anime() 函数，扩展成了一整套围绕时间线、拖拽、滚动触发、文字特效的模块化工具集，同时全面转向 ES Module 写法。

核心优势

API 从"一个函数"变成"一套工具箱" ：V3 时代几乎所有动画都靠一个 anime({...}) 配置对象搞定；V4 把核心动画函数改名为 animate()，并围绕它拆分出 createTimeline（多动画精确编排）、createTimer、createDraggable（带物理惯性的拖拽交互）、createScope（配合媒体查询的动画作用域管理）、createLayout（DOM 重排布局动画）等一整套构建块，各自解决一类具体问题，而不是把所有能力都塞进一个函数里。

内置文字动画能力 ：splitText 可以把文本拆成字符/单词/行，配合动画逐个入场；scrambleText 则实现打字机式的乱码到文字的揭示效果，不用再自己手写拆字逻辑。

滚动与交互开箱即用 ：ScrollObserver 提供滚动触发动画的能力，createDraggable 自带摩擦力和阻尼可调的物理拖拽，做滚动视差或可拖拽交互不需要再额外引入第三方库。

多目标、多类型统一驱动 ：同一套 animate() 语法既能改 CSS 属性和 transform，也能改 SVG 属性、DOM 属性或普通 JS 对象上的数值，配合关键帧、错开延迟（stagger）、贝塞尔曲线/弹簧等多种缓动，覆盖了绝大多数前端动画场景。

面向人群

需要给页面元素、SVG 图标、滚动区块加动画效果的前端开发者
已经在用 V3 版本、准备评估迁移到 V4 新架构的老用户
想做交互式拖拽卡片、可视化图表过渡、文字揭示特效的产品页面开发者
对动画库体积和性能敏感、不想引入重型动画框架的项目

快速上手

安装（ESM 包，animejs）：

bash 复制代码

npm install animejs

基本用法------对匹配 .square 的元素做位移、旋转，并用 stagger 从中心向两侧错开动画延迟：

js 复制代码

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
});

如果之前用的是 V3 的 anime({...}) 写法，官方在 GitHub Wiki 提供了详细的 V3 到 V4 迁移指南，完整文档则统一放在 animejs.com/documentation。

进阶用法

用 createTimeline 编排多段动画 ，保证多个元素按精确的先后顺序或重叠时间执行，比手动管理多个 animate() 调用的延迟时间更直观。

用 createDraggable 做物理拖拽交互：可以调节摩擦力和阻尼参数，做出带惯性的拖拽卡片、滑块等交互组件。

用 createScope 管理动画作用域：配合媒体查询，可以让同一段动画逻辑在不同屏幕尺寸下有不同表现，方便做响应式动画而不用手写一堆条件判断。

参与源码开发 ：克隆仓库后执行 npm i 安装依赖，然后可以用以下脚本参与开发和测试：

bash 复制代码

npm run dev          # 监听 src/**/*.js 变化，打包 ESM 版本并生成类型声明
npm run dev:test     # 同时跑 dev 和浏览器测试
npm run build        # 打包 ESM / UMD / CJS / IIFE 多种格式并生成类型声明
npm run test:browser # 启动本地服务器运行浏览器相关测试
npm run test:node    # 运行 Node 相关测试
npm run open:examples # 启动本地服务器浏览官方示例

Anime.js 由 Julian Garnier 维护，采用 MIT 协议完全开源，项目通过 GitHub Sponsors 接受赞助以保持可持续维护。