Anime.js（发音为 /'aen..me/）是一款轻量级、高性能的 JavaScript 动画库，专注于通过简洁 API 实现流畅的网页动画效果。以下是其核心特性和使用指南：

一、核心特性与优势

1. 多场景支持
   可操作 CSS 属性、SVG 路径、DOM 属性及 JavaScript 对象，支持从基础元素移动（如平移、旋转）到复杂 SVG 路径动画。例如，通过 translateX 和 rotate 实现元素位移与旋转联动。
2. 轻量高效
   文件体积仅约 20KB（压缩后），内置硬件加速优化，即使在低性能设备上也能保持流畅运行。例如，通过 easing: 'easeInOutQuad' 实现平滑的缓动效果。
3. 灵活的时间控制
   提供时间轴（Timeline）功能，支持动画的串联、并行及延迟控制。例如，通过 anime.timeline() 实现多个动画按顺序或重叠播放。
4. 跨浏览器兼容
   支持 Chrome 24+、Safari 8+、Firefox 32+ 等主流浏览器，自动处理供应商前缀（如 -webkit-）。
5. 丰富的插件生态
   可结合 ScrollMagic 实现滚动触发动画，或与 Three.js 集成创建 3D 交互动画。

二、快速入门指南

安装与引入

• CDN 引入（推荐新手）：
• html
• 运行
• 复制
• <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
• npm 安装（适合项目开发）：
• bash
• 复制
• npm install animejs --save
• 引入模块：import anime from 'animejs/lib/anime.es.js';

基础动画示例

javascript

复制

// 使元素向右移动 250px，旋转 360 度，背景变白
anime({
  targets: '.box',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800,
  easing: 'easeInOutQuad',
  loop: true
});

说明：targets 指定动画对象（支持 CSS 选择器或 DOM 元素），duration 控制时长（毫秒），loop 设置循环播放。

进阶功能

1. 交错动画（Staggering）
   通过 delay: anime.stagger(100) 实现元素组的错序动画效果，适用于列表项或卡片布。
2. SVG 路径动画
   动态修改 SVG 的 d 属性，实现路径绘制效果：
3. javascript
4. 复制
5. anime({ targets: svgPath, d: 'M10 80 C 40 10, 65 10, 95 80', duration: 2000, easing: 'easeInOutQuad' });
6. 提示：使用 anime.path() 可让元素沿 SVG 路径运动。
7. 时间轴控制
   创建复杂动画序列：
8. javascript
9. 复制
10. const timeline = anime.timeline({ easing: 'easeOutExpo', duration: 750 }); timeline .add({ targets: '.box1', translateX: 250 }) .add({ targets: '.box2', translateY: 50 }, '-=600'); // 与前一个动画重叠 600ms

四、适用场景

• 网页过渡效果：页面滚动、菜单展开等交互设计
• 数据可视化：动态图表、数据增长动画
• 游戏开发：角色动作、场景切换（如太阳系行星运动模拟）。
• 品牌展示：LOGO 动态效果、产品演示动画