Anime.js 是由 Julian Garnier 开发的一个小巧但功能强大的 JavaScript 动画库，旨在简化对网页元素的动画控制。它支持多种动画目标（如 CSS、SVG、DOM 属性和普通 JavaScript 对象），并提供了连贯一致的 API，让动画制作变得更加灵活和可控。
🎯 支持的动画类型
Anime.js 可以为以下类型的属性或对象设置动画：
CSS 属性支持常见的 CSS 属性如 opacity, transform, width, height 等。
SVG 属性支持 strokeDashoffset, stroke, fill, points, path 等 SVG 特有属性。
DOM 属性可对 HTML 元素属性如 scrollTop, value 等设置动画。
JavaScript 对象普通 JS 对象的属性，如 { x: 0 } 到 { x: 100 }。
路径动画允许元素沿着 SVG path 动画移动。
✨ 核心功能详解
1. 多目标动画控制
可以一次性控制多个元素、多个属性：
anime({ targets: '.box', translateX: 250, rotate: '1turn', backgroundColor: '#FFF', duration: 2000 });
2. 关键帧动画 (Keyframes)
使用类似 CSS 的关键帧方式描述动画序列：
anime({ targets: '.el', keyframes: [ { translateX: 250 }, { scale: 2 }, { rotate: '1turn' }, { opacity: 0.5 } ], duration: 3000, });
3. 缓动函数 (Easing)
Anime.js 提供内置缓动函数，也支持自定义贝塞尔曲线：
easing: 'easeInOutQuad' // 也可使用贝塞尔曲线 easing: 'cubicBezier(.5, .05, .1, .3)'
4. 时间线 (Timeline)
用于组织多个动画的播放顺序，支持偏移、并行与串行动画：
let tl = anime.timeline({ easing: 'easeOutExpo', duration: 750 }); tl.add({ targets: '.box', translateX: 250 }).add({ targets: '.box', translateY: 40 }, '-=500'); // 从上一个动画前 500ms 开始
5. 循环与往返 (Loop & Alternate)
anime({ targets: '.circle', translateX: 250, loop: true, direction: 'alternate' // 来回动画 });
6. Staggering（错位动画）
内置 stagger() 函数实现流畅的错位动画：
anime({ targets: '.grid .item', translateY: 100, delay: anime.stagger(100, { start: 500 }) });
🛠 安装与使用
安装
npm install animejs
引用
🔧 开发细节
Anime.js 是基于原生 JavaScript 编写的，无任何依赖。
构建版本提供三种格式：UMD（用于浏览器）、ESM（用于现代打包器）、IIFE。
提供 TypeScript 类型声明（从 v3.0+ 开始）。
支持现代开发工具链（如 Rollup、ESLint、Babel）。
🎨 典型应用场景
页面加载动画（Loading Indicators）
SVG 图标、图表或路径的动画效果
滚动触发的视差动画（与 IntersectionObserver 联用）
表单交互反馈
Canvas 或 WebGL 场景的 UI 辅助动画
数字递增（如计数器、仪表盘等）
🔗 官方资源
✅ 优缺点简评
| 优点 | 缺点 |
|---|
| 极其小巧（压缩后仅几 KB） | 动画性能在极复杂场景不如原生 CSS |
| 零依赖、API 简洁 | 不适合高级 3D 动画（建议用 GSAP） |
| 支持时间轴、关键帧、路径动画 | 不具备 UI 组件动画绑定 |
| 支持所有主流属性类型 | 不自带场景管理（需手动协调） |
