基本用法

相关源文件

• README.md
• assets/sponsors/ice-open-network-logomark-dark.svg
• assets/sponsors/ice-open-network-logomark.svg
• examples/assets/css/styles.css
• package.json

本页旨在演示 anime.js 的基本动画概念和基本 API 用法。它涵盖了如何使用核心函数创建简单动画、定位元素、指定要动画的属性以及设置动画参数。

有关动画引擎内部的详细信息，请参阅 核心架构。有关完整的 API 参考，请参阅 API 参考。

导入 anime.js

Anime.js v4 使用 ES 模块，允许您仅导入所需的功能

来源: README.md25-35

动画工作流

使用 anime.js 创建动画遵循以下基本模式

动画管道将您的配置处理为视觉变化

来源: README.md25-46

animate() 函数

创建动画的核心函数接受一个目标和一个包含属性和参数的对象

来源: README.md32-45

定位元素

Anime.js 支持多种方式选择动画元素

目标类型	示例	描述
CSS 选择器	'.my-class'	选择匹配 CSS 选择器的元素
DOM 元素	document.querySelector('.el')	直接引用 DOM 节点
NodeList	document.querySelectorAll('.els')	DOM 节点集合
JavaScript 对象	{ prop: 0 }	动画对象属性
数组	['.el1', '.el2', domEl]	不同目标类型的混合

来源: README.md37-38

可动画属性

您可以使用 anime.js 动画各种类型的属性

在 README 示例中，我们看到 transform 属性（x, rotate）都在进行动画

来源: README.md12-14 README.md37-40

动画参数

控制动画播放的常见参数

参数	描述	示例
duration	动画持续时间（毫秒）	duration: 1250
delay	动画开始前的延迟	delay: stagger(65)
ease	缓动函数	ease: 'inOutQuint'
loop	循环次数 (true = 无限循环)	loop: true
alternate	循环时交替方向	alternate: true
autoplay	是否自动开始	autoplay: false

来源: README.md40-44

完整基本示例

以下是 README 中展示常见使用模式的完整示例

此动画将

1. 定位所有带有 class square 的元素
2. 水平移动它们 320 像素
3. 从 -180 度旋转它们
4. 运行 1250 毫秒
5. 应用从中心元素开始的交错延迟
6. 使用 'inOutQuint' 缓动函数
7. 无限循环
8. 每次循环时交替方向

来源: README.md32-45

属性值格式

Anime.js 处理不同属性值格式

值格式	示例	描述
简单值	opacity: 0.5	直接结束值（从当前值开始）
从-到对象	rotate: { from: -180 }	显式起始值
单位值	translateX: '100px'	带单位的值（px、%、em 等）
颜色	backgroundColor: '#FFF'	颜色值（十六进制、rgb、rgba、hsl）

来源: README.md39

使用 stagger() 进行顺序动画

stagger() 函数为多个元素创建顺序时间

有关更高级的交错技术，请参阅 交错动画。

来源: README.md41

动画处理可视化

此图演示了动画过程中属性值的处理方式

来源: README.md37-44

下一步

掌握基础知识后，您可能想探索

• 动画参数，了解所有可用选项
• 时间轴系统，用于创建顺序动画
• 播放控制，用于创建后控制动画
• SVG 动画，用于专门的 SVG 技术
• JavaScript 对象动画，用于动画非视觉属性