基本动画示例

相关源文件

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

本页面提供了使用 anime.js 实现基本动画模式的实用示例。这些示例是理解如何在项目中实现常见动画的基础。有关更复杂的序列或基于时间轴的动画，请参阅时间轴示例。有关特定于 SVG 的动画，请参阅SVG 和 Canvas 示例。

动画基础

anime.js 动画的核心是 animate() 函数，它接受一个目标和动画参数。在版本 4 中，通过导入所需的函数并将其应用于元素或对象来创建动画。

来源： README.md25-46

基本位移动画

最简单的动画是将元素从一个位置位移到另一个位置。README 中的示例展示了如何沿 x 轴移动元素并同时应用旋转。

来源： README.md32-45

属性值设置

Anime.js 提供了灵活的方式来指定动画的属性值。您可以使用简单值、from/to 对象或数组。

来源： README.md37-40

交错动画

交错动画是 anime.js 的强大功能之一，它通过应用延迟来在多个元素上创建序列效果。

README 中的示例展示了如何使用值为 65ms 的 stagger() 和 from: 'center' 选项来创建从中心元素开始的序列动画。

来源： README.md41

动画控制参数

基本动画可以通过各种控制参数进行自定义，这些参数会影响动画的播放方式。

来源： README.md39-44

基本动画生命周期

anime.js 中的每个动画都遵循一个生命周期，包括初始化、播放和完成阶段。

README 中的示例创建了一个连续运行的循环动画，使用 alternate: true 参数在每次迭代时切换方向。

来源： README.md43-44

CSS 样式动画示例

Anime.js 可以动画化各种 CSS 属性，包括颜色、变换和尺寸。examples 目录包含可用于演示目的的 CSS 样式。

examples 目录包含带有颜色变量的 CSS 样式，这些样式可用于动画。

来源： examples/assets/css/styles.css1-17

动画目标定位方法

Anime.js 提供了灵活的目标定位选项来选择要动画化的元素。

README 中的示例使用 CSS 选择器 (.square) 来定位要动画化的元素。

来源： README.md37

示例的视觉样式

examples 目录包含定义演示中使用的样式的 CSS，其中包括网格系统和各种颜色定义。

来源： examples/assets/css/styles.css1-17 examples/assets/css/styles.css41-84

动画实践示例

README 中的示例展示了多个动画概念的协同工作

1. 使用 CSS 选择器定位元素
2. 使用 x 属性水平移动元素
3. 从指定起始角度旋转元素
4. 从中心应用交错延迟
5. 设置特定的缓动函数
6. 创建带有交替方向的连续循环

这一个示例展示了如何结合这些基本动画功能来创建引人入胜的视觉效果。

来源： README.md37-45

基本动画模式总结

anime.js 中的基本动画模式可归类如下

模式	描述	关键参数
翻译	空间中元素的移动	x, y, translateX, translateY
旋转	元素旋转	rotate, rotateX, rotateY, rotateZ
扩展	改变元素大小	scale, scaleX, scaleY
不透明度	元素淡入淡出	opacity
颜色	改变颜色	backgroundColor, color, 等。
交错	序列动画	delay: stagger()
循环	重复动画	loop: true/number
方向	交替播放	alternate: true

这些模式构成了使用 anime.js 创建更复杂动画的基础。

来源： README.md37-44