# Anime.js 教程

URL: https://caijiao.org/animejs/
Source: docs/animejs/index.md
Description: Anime.js 是一个轻量且功能强大的 JavaScript 动画库，适合实现网页中的各种复杂动画效果。本教程系统全面地介绍了 Anime.js 的基础用法、时间线动画、进阶技巧和实战案例，帮助开发者快速上手并掌握动画的制作方法。

![Anime.js logo](/images/animejs/logo.png)

**Anime.js** 是一款轻量、强大且易用的 JavaScript 动画库。本教程将带你从入门到进阶，系统掌握制作流畅网页动效的实用技能。

![Anime.js 教程封面](/images/animejs/cover.png)

## 🚀 快速上手

[介绍 Anime.js](/animejs/1-intro/1-what-is-anime) 的核心概念与基础用法，帮助你快速开始编写动画代码。

- 动画目标（[targets](/animejs/2-basics/1-targets)）
- [动画属性](/animejs/2-basics/2-properties)（translate、rotate、opacity 等）
- easing、duration 等[基本配置](/animejs/2-basics/3-parameters)

## ⚙️ 丰富动画效果

Anime.js 支持多种动画属性，灵活实现各类视觉动效：

- 位移、缩放、旋转
- 颜色变化、透明度调整
- 自定义属性动画

## ⏳ 时间线动画

通过 `anime.timeline()` 创建复杂的序列动画，轻松管理动画顺序与同步。

- 多步骤动画组织
- 精准控制延迟与持续时间
- 动画交错与并发执行

## 💡 进阶技巧

掌握更高级的动画技巧，打造动态交互体验：

- [动态属性](/animejs/4-advanced/1-dynamic-properties)设置
- 动画方向与循环控制
- [事件监听](/animejs/2-basics/4-events)与状态管理

## 🖌️ SVG 动画支持

Anime.js 原生支持 SVG 动画：

- 路径描边动画（strokeDashoffset）
- 路径变换与缩放
- 与 HTML 元素联动

## 🧩 框架集成

Anime.js 可轻松与主流框架结合使用：

- [Vue](/animejs/6-integration/1-vue)、[React](/animejs/6-integration/2-react) 中使用 [Anime.js](/animejs/) 的方式
- 组件化[封装](/animejs/8-summary/3-extend)与生命周期控制
- 实现响应式动效

## 🔥 实战案例

精选常见动效场景，实用又易上手：

- [按钮点击动画](/animejs/5-cases/1-button)
- [页面加载动效](/animejs/5-cases/2-loading)
- [悬停与滚动](/animejs/5-cases/3-hover-card)交互动画

## 🔧 性能与调试

优化动画表现，避免性能陷阱：

- 使用 `will-change`、GPU 加速技巧
- 合理使用 requestAnimationFrame
- 动画调试与[排错](/animejs/7-tips/3-errors)方法

---

通过本教程，你将系统掌握 Anime.js 的使用技巧，构建令人印象深刻的网页动画效果。