Anime.js

项目概述

Anime.js 是由设计师兼前端工程师 Julian Garnier 开发的超轻量且功能强大的 JavaScript 动画引擎。它以优雅简洁的 API、零外部依赖以及极致轻巧的体积著称，能够轻松驱动 CSS 属性、SVG 矢量路径、DOM 属性及任意 JavaScript 对象的复杂补间动画。

核心特性

• ⚡ 极致轻巧与模块化：核心体积仅约十几 KB，无任何外部依赖，支持按需引入计时器、时间轴与动画模块。
• 🎨 全方位动画目标支持：无缝操控 CSS Transform、颜色渐变、SVG 路径形变、描边动画 (Line Drawing) 以及 Canvas 像素值。
• ⏱️ 强大灵活的时间轴与错落效果：内置灵活的 Timeline 链式编排机制与 anime.stagger() 错落延时调度，轻松实现富有层次感的群组动画。
• 📐 丰富的高阶缓动曲线：内置包括 Spring 弹簧、Elastic 弹性、Bézier 贝塞尔在内的数十种开箱即用缓动算法，支持自定义数学方程。

快速上手与示例代码

npm install animejs

import anime from 'animejs';

// 针对卡片列表执行弹性错落入场动效
anime({
  targets: '.card-item',
  translateY: [40, 0],
  opacity: [0, 1],
  scale: [0.9, 1],
  delay: anime.stagger(100, { start: 200 }),
  duration: 1200,
  easing: 'easeOutElastic(1, .6)',
  loop: false,
});

技术选型建议与适用场景

• 非常适合：UI 界面微交互动效、图表与卡片进出场过渡、SVG 矢量图标路径绘制以及注重页面加载速度的高品质落地页。
• 与同类方案对比：相比 GSAP，Anime.js 更加轻量极简且开源协议纯粹，非常适合中轻量级交互动效；若涉及极其庞大且重度依赖滚屏洗刷 (Scroll Scrubbing) 的企业级巨型时间轴，则 GSAP 生态更为完备。