---
title: 页面滚动动画库(aos)
date: 2020-10-26
author: ac
tags:
- aos
- CSS3
categories:
- Web
---
> aos.js是一款用于页面滚动动画效果的js库。该动画库可以在页面滚动时提供28种不同的动画效果，以及多种easing效果，在页面滚动时，给元素添加动画过渡到原来的状态。
## 页面滚动动画库(aos)
[[aos的github地址](https://github.com/michalsnik/aos)] `https://github.com/michalsnik/aos`
### 安装
1. CDN 的方式
引用aos的样式文件
```html
```
在`body`标签 中添加`aos`库
```html
```
2. npm 的方式
```shell
npm insatll aos
```
在入口文件`main.js`中引入`AOS`库
```javascript
import AOS from 'aos';
import 'aos/dist/aos.css';
```
### 使用
#### 1.初始化`AOS`
执行`AOS.init(option)`函数，`AOS`会在``元素中添加一些`option`配置项内容，通常配置页面整体的一些动画过渡属性和全局的配置。
```javascript
AOS.init({
// Global settings:
disable: false, // 设置AOS禁用的条件: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // 初始化监听事件
initClassName: 'aos-init', // 每个aos渲染的元素初始化的class样式，默认是‘aos-init’
animatedClassName: 'aos-animate', // 每个aos渲染的元素的动态属性的样式
useClassNames: false, //当为true时，进行或完成动画的元素的`data-aos`属性的值会添加到class属性中
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, //初始触发点的(Y轴)偏移量(单位:px)
delay: 0, // 动画的延迟时间，取值[0,3000]，步长50ms
duration: 400, // 动画的持续时间，取值[0,3000], 步长50ms
easing: 'ease', // default easing for AOS animations
once: false, // 动画是否只渲染一次
mirror: false, // 当滚动经过元素时，是否应该将其动画化
anchorPlacement: 'top-bottom', // 元素触发动画的位置
});
```
#### 2.配置动画元素属性
```html
```
| **属性** | **属性** | **属性** | **默认值** |
| -------------------- | -------------------------------------------------- | ------------ | ---------- |
| aos-offset | 触发元素动画的位置在Y轴上的偏移量 | 200 | 120 |
| aos-duration | 动画持续时间 | 600 | 400 |
| aos-easing | 动画的easing动画效果 | ease-in-sine | ease |
| aos-delay | 动画的延迟时间 | 300 | 0 |
| aos-anchor | 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 | #selector | null |
| aos-anchor-placement | 锚位置，触发动画时元素位于屏幕的位置 | top-center | top-bottom |
| aos-once | 动画是否只会触发一次，或者每次上下滚动都会触发 | true | false |
**淡入淡出动画：**
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
**翻转动画：**
- flip-up
- flip-down
- flip-left
- flip-right
**滑动动画：**
- slide-up
- slide-down
- slide-left
- slide-right
**缩放动画：**
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
**锚位置**
- top-bottom
- top-center
- top-top
- center-bottom
- center-center
- center-top
- bottom-bottom
- bottom-center
- bottom-top
**easing动画**
你可以使用以下的一些easing动画效果：
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine
- ease-in-out-sine
- ease-in-quad
- ease-out-quad
- ease-in-out-quad
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart
#### 3.示例
```html
AOS示例
1
2
3
4
5
6
7
8
9
10
11
```
### 参考文章
[1] aos.js超赞页面滚动元素动画jQuery动画库 https://www.jq22.com/jquery-info8150
[2] aos https://github.com/michalsnik/aos#animations