Anime.js轻量级、高性能的 JavaScript 动画库

boyanx6个月前 (06-10)技术教程23

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

一、核心特性与优势

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

进阶功能

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