一、它是什么：7 万星的网页动画引擎

Anime.js（juliangarnier/anime，MIT，7.2 万星，animejs.com）是目前生态里最完整的开源前端动画引擎之一：用几十行 JS 给 DOM、SVG、Canvas、任意 JS 对象加动画，时间线 / 缓动 / 交错（stagger）/ 滚动触发 / 可循环控制全都有。它和 GSAP 常被放在一起比——Anime.js 胜在免费、MIT、零依赖、轻量，不商用也不挑，适合中小项目和原型；GSAP 生态更深但 2025 年后商业授权收紧。对「想要好用又不想被授权协议卡脖子」的场景，Anime.js 一直是安全选择。

二、当前状态：v4.5.0 稳定版 + v5 beta，仓库活着

它中途有一小段「原作者弃养→社区维持」的波折（v3 到 v4 之间仓有过一阵不活跃期），视频里可能还停在旧印象。实查现状（截至 2026-09-14）：v4.5.0 是 2026-06-22 发的稳定版，npm 上还有 5.0.0-beta.2，仓库 2026-08-21 也推过，没归档、维护在继续。所以「已死」的传言过时了，直接装 animejs@4 就能用。

三、核心能力

四类对象：DOM（位置/宽高/透明度/颜色）、SVG（描边路径、变换）、Canvas（自研 2D 场景里的对象）、JS 对象（数值字段，驱动任何你想要动画的东西）。

时间线（Timeline）：把多个动画编排到同一条时间轴上，控制相对 / 绝对开始时间、重叠、嵌套，做复杂多阶段动画不用自己 setTimeout。

交错（Stagger）：给一组元素统一加动画，但每个元素按「网格位置 / 中心点 / 随机」自动算偏移量，一行代码做出瀑布流逐格入场、波纹扩散这类效果。

缓动 / 弹簧 / 滚动触发：内置 easeOutQuad、elasticOut 等一整套缓动；还能绑定 scroll 事件按滚动位置推进动画，做视差 / 进屏触发。

四、用法速查

// 最简用法
import anime from "animejs";

anime({
  targets: ".card",
  translateY: -20,
  opacity: [0, 1],
  duration: 600,
  easing: "easeOutQuad",
  delay: anime.stagger(100),   // 每个卡片错开 100ms
});

// 时间线编排
const tl = anime.timeline({ easing: "easeOutExpo" });
tl.add({ targets: ".a", scale: [0, 1], duration: 500 })
  .add({ targets: ".b", opacity: [0, 1], offset: "-200ms" });

装法：npm i animejs，浏览器里直接 <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0" /> 也行。体积只有十几 KB（min），不挑环境。

五、适合谁、要不要上

适合「要做出有质感的进出场、卡片交错、进度条、滚动视差，但不想被 GSAP 商业授权绑住，也不想要 200KB+ 的重框架」的前端 / 独立开发者。7.2 万星是它的下限：文档齐、社区示例多（animejs.com 上有官方 playground + 一堆 Demo）、出问题搜得到。

三个取舍心里有数：① 它是免费 MIT，商用零成本，这点对比 GSAP 是硬优势；② **v4 稳定、v5 在 beta**，新项目直接上 4.5.0 稳；③ 超大规模 / 需要极致帧率的项目（复杂游戏式 UI）可能还得配 GSAP / 或 Framer Motion（React 生态），Anime.js 走的是「通用够用 + 轻」那条路。

一句话：要「轻量 + 免费 + 什么都能动」，Anime.js 是标准答案。

仓库：github.com/juliangarnier/anime · 官网 / Playground：animejs.com · npm：animejs · 星标 72,817 / MIT / 最新 v4.5.0 + v5.0.0-beta.2（截至 2026-09-14 实查）