什么是 Anime.js
Anime.js 是一个轻量级（lightweight）的 JavaScript 动画库，拥有简洁但强大的 API。你可以用它来动画 DOM 元素、CSS 属性、SVG 路径、JavaScript 对象等。它支持动画的时间控制（duration、delay）、缓动函数（easing）、循环（loop）、交替方向（direction）、关键帧（keyframes）、时间线（timeline）、错开（stagger）等功能。
Anime.js 的设计目标是既能快速上手，也能做出复杂、优雅的动画效果，同时兼顾性能和兼容性。
为什么使用 Anime.js
- 丰富的动画属性：不仅仅是位移（translate），可以动画缩放（scale）、旋转（rotate）、透明度（opacity）、颜色、SVG 路径等。
- 控制灵活：支持延迟（delay）、循环（loop）、方向切换（direction）、缓动（easing）、关键帧（keyframes）等高级控制。
- 错开动画（stagger）：可以轻松对一组元素做交错或顺序动画。
- 时间线（timeline）：可组合多个动画序列，进行复杂的动画流程控制。
- 对 SVG 的支持好：包括路径变形（morph）、路径跟随、图形绘制动画等。
- 易集成：无论是纯静态页面还是带框架的项目都可以用，无需强依赖。
怎样安装／引入 Anime.js
通常有以下几种方式：
通过 CDN 引入
在 HTML 中添加 <script> 标签到相应的 CDN 地址。
通过 npm / yarn 安装
如果你项目中用模块打包工具（比如 Webpack、Parcel、Vite 等），可以用 npm install animejs 或 yarn add animejs。
下载压缩文件
从 Anime.js 官方下载压缩版 JS 文件，手动引入。
基础示例代码
下面是一个简单示例，演示如何让一个 div 元素做往返平移，并在鼠标悬停时改变缩放和颜色。这个示例展示了 Anime.js 的常用参数和效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anime.js 基本示例</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 50px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- 引入 Anime.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<script>
// 基本动画：让 .box 向右移动 + 往返 + 循环
anime({
targets: '.box',
translateX: 300,
duration: 2000,
direction: 'alternate',
loop: true,
easing: 'easeInOutQuad'
});
// 鼠标交互动画：悬停放大 + 改颜色
const boxEl = document.querySelector('.box');
boxEl.addEventListener('mouseenter', () => {
anime({
targets: boxEl,
scale: 1.3,
backgroundColor: '#e74c3c',
duration: 500,
easing: 'easeOutCubic'
});
});
boxEl.addEventListener('mouseleave', () => {
anime({
targets: boxEl,
scale: 1,
backgroundColor: '#3498db',
duration: 500,
easing: 'easeOutCubic'
});
});
</script>
</body>
</html>
Anime.js 常用 API 方法
这些方法通常是对 animate(...) 或 anime(...) 返回的 Animation 实例 或 Timeline 实例可调用的，用来控制动画的播放 / 停止 /状态跳转等。
- play()：开始或恢复动画播放（如果动画被暂停或在初始状态）
- pause()：暂停动画
- restart()：从头重启动画（重置进度，然后播放）
- reverse()：反转动画方向，比如如果原来是从 A → B，则变为从 B → A
- seek(time)：跳转动画到某个时间点（单位通常是毫秒）
- complete()：立即将动画置为完成状态（跳到结束状态）
- cancel()：取消动画，通常会停止动画并清除内部状态 /回调等
- resume()：恢复动画，如果之前被暂停或暂停中断
- alternate()：与 direction: 'alternate' 类似，设置动画来回交替播放
- stretch(ratio)：改变动画持续时间，按比例拉伸或压缩时间线（速度变化）
- refresh()：刷新动画状态（例如在 DOM 更改、元素变尺寸或样式改变后，让动画重新计算相关属性）
- revert()：回退到动画开始之前的状态（某些版本中有，用于撤销动画带来的样式改动）
进阶用法与技巧
以下是一些常见进阶场景，以及如何用 Anime.js 实现它们：
- 关键帧动画（Keyframes）：当你需要一个动画在多个阶段有不同的属性值时，使用 keyframes 数组。例如 -- 先移动，再旋转，再改变颜色。
- 时间线（Timeline）：如果遇到复杂动画序列，而不仅仅是一个动画，可以用 anime.timeline({...}) 来组合多个动画，并控制它们之间的启动顺序与重叠。
- 错开效果（Stagger）：对一组相似元素做动画时，用 delay: anime.stagger(...) 可以创建顺序错开或波浪之类的视觉效果。
- SVG 动画：比如路径 (path) 的绘制，形状变形 (morphing)，沿路径移动等。非常适合图形界面、图表、图标等场景。
- 自定义缓动函数（Easing）：Anime.js 提供了内置的缓动函数，比如 easeInOutExpo、easeOutCubic 等，还支持自定义函数，以实现特殊节奏或视觉效果。
小结
Anime.js 是一个兼顾易用性与定制性的前端动画库。无论你是刚需要为页面加一些简单效果，还是想设计复杂的动画流程（timeline、SVG morphing、错开效果等），它都能胜任。开始时可以从简单的动画、平移动画、缩放、颜色等属性练习起，再逐步尝试关键帧、时间线、SVG 等高级用法。