aos.js动画_AOS库使滚动动画变得很酷

小灰灰 2022-12-03 09:46 867阅读 0赞

aos.js动画

![Cool On Scroll Animations with AOS Library][]

As front-end developer, a popular request you might get from your clients is to implement stunning animation effects on page scroll. There are many libraries to make this task easier for us. [AOS][], also called **Animate on Scroll**, is one such library and it does exactly what its name suggests: it lets you apply different kinds of animations to elements as they scroll into view.

作为前端开发人员，您可能会从客户那里得到一个普遍的要求，那就是在页面滚动上实现惊人的动画效果。 有许多库可以使我们轻松完成此任务。 [AOS][] ，也称为**Scroll上的Animate** ，就是这样的一个库，它的功能恰如其名：它使您可以在元素滚动到视图时将不同种类的动画应用于元素。

Here, you will learn about the inner workings of AOS, how to install the library and get it to work. By the end of this tutorial, building animations on scroll for your clients will be a breeze.

在这里，您将了解AOS的内部工作原理，如何安装该库并使它正常工作。 在本教程结束时，为您的客户构建滚动动画将变得轻而易举。

## 如何安装AOS库 **(**How to Install the AOS Library**)** ##

You can install AOS using [Bower][] or [npm][].

您可以使用[Bower][]或[npm][]安装AOS。

Bower:

凉亭：

bower install aos --save

npm:

npm：

npm install aos --save

Next, link AOS styles and scripts:

接下来，链接AOS样式和脚本：

If you prefer, you can download the AOS stylesheet and JavaScript files using a CDN as follows:

如果愿意，可以使用CDN下载AOS样式表和JavaScript文件，如下所示：

The CSS:

CSS：

The JavaScript:

JavaScript：

That’s it, there are no other dependencies, which helps to keep your website’s performance under control.

就是这样，没有其他依赖性，这有助于使您的网站性能得到控制。

To initialize AOS, just write the line below in your JavaScript file.

要初始化AOS，只需将以下行写在您JavaScript文件中。

AOS.init();

## AOS入门 **(**Getting Started With AOS**)** ##

After initializing the library all you have to do is add some specific attributes.

初始化库后，您要做的就是添加一些特定的属性。

To use basic animations you just need to add `data-aos="animation_name"` to your HTML elements.

要使用基本动画，您只需要在HTML元素中添加`data-aos="animation_name"` 。

There are several types of animation you can choose from. For example, you can add fade animations like “fade”, “fade-up” and “fade-down-left”. Similarly, you can also add flip and slide animations like “flip-up”, “flip-left”, “slide-down”, and “slide-right”.

您可以选择几种动画类型。 例如，您可以添加淡入淡出的动画，例如“淡入淡出”，“淡入淡出”和“淡入淡出左”。 同样，您也可以添加翻转和滑动动画，例如“上翻”，“左翻”，“下滑”和“右滑”。

Here’s the markup of our first example:

这是我们第一个示例的标记：

<div class="box a" data-aos="fade-up">
      <h2>Animated usingfade-up.</h2>
    </div>
    <div class="box b" data-aos="flip-down">
      <h2>Animated using flip-down.</h2>
    </div>
    <div class="box b" data-aos="zoom-in">
      <h2>Animated using zoom-in.</h2>
    </div>

Besides the initialization line in the previous section, animating the elements doesn’t require you to do anything else.

除了上一节中的初始化行之外，对元素进行动画处理不需要您执行任何其他操作。

Have a look at the code above in action:

看一下上面的代码：

See the Pen [Animate on Scroll Examples][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )上的“ [滚动示例上][Animate on Scroll Examples]的笔[动画”][Animate on Scroll Examples] 。

## 使用AOS数据属性配置动画 **(**Configuring Your Animations With AOS Data Attributes**)** ##

Let’s dive into the list of the data attributes you can use to configure your animations.

让我们深入了解可用于配置动画的数据属性列表。

*  `data-aos-offset` — You can use this attribute to trigger the animation sooner or later than the designated time. Its default value is 120px.
    
    `data-aos-offset`您可以使用此属性早于指定时间触发动画。 其默认值为120px。
 *  `data-aos-duration` — You can use this attribute to specify the duration of the animation. The duration value can be anywhere between 50 and 3000 with steps of 50ms. Since the duration is handled in CSS, using smaller steps or a wider range would have unnecessarily increased the size of the CSS code. This range should be sufficient for almost all animations. The default value for this attribute is 400.
    
    `data-aos-duration`您可以使用此属性指定动画的持续时间。 持续时间值可以在50到3000之间，步长为50ms。 由于持续时间是在CSS中处理的，因此使用较小的步长或更大的范围将不必要地增加CSS代码的大小。 对于几乎所有动画，此范围都应该足够。 此属性的默认值为400。
 *  `data-aos-easing` — You can use this attribute to control the timing function for animating different elements. Possible values are: `linear`,`ease-in-out` and `ease-out-quart`. You can see a list of all accepted values on the [project’s Readme file on GitHub][project_s Readme file on GitHub].
    
    `data-aos-easing` —您可以使用此属性来控制对不同元素进行动画处理的定时功能。 可能的值为： `linear` ， `ease-in-out` `ease-out-quart` 。 您可以[在GitHub][project_s Readme file on GitHub]上的[项目自述文件中][project_s Readme file on GitHub]看到所有接受的值的列表。

Here’s an example using `data-aos-duration` and `data-aos-easing`:

这是一个使用`data-aos-duration`和`data-aos-easing`的示例：

See the Pen [Animate on Scroll Examples – Attributes][Animate on Scroll Examples _ Attributes] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见“ [滚动示例上][Animate on Scroll Examples _ Attributes]的笔[动画” –][Animate on Scroll Examples _ Attributes] [CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的[属性][CodePen] 。

More data attributes you can use are:

您可以使用更多数据属性：

*  `data-aos-anchor` — This attribute is useful when you want to trigger the animation based on the position of some other element. It accepts any selector as its value. The default value is `null`. This means that all the animations will be triggered with respect to the element’s own position.
    
    `data-aos-anchor` —当您要基于其他元素的位置触发动画时，此属性很有用。 它接受任何选择器作为其值。 默认值为`null` 。 这意味着将根据元素自己的位置触发所有动画。
 *  `data-aos-anchor-placement` — By default, the animations on an element are applied as soon as its top part reaches the bottom part of the window. This behavior can be changed using the `data-aos-anchor-placement` attribute. As its value, this attribute accepts two words separated by a hyphen. For example, you can set it to `top-bottom`, `top-center` or `top-top`. Three such combinations are also possible for both the `center` and `bottom` values.
    
    `data-aos-anchor-placement` —默认情况下，一旦元素的顶部到达窗口的底部，就会应用该元素上的动画。 可以使用`data-aos-anchor-placement`属性更改此行为。 作为其值，此属性接受由连字符分隔的两个单词。 例如，您可以将其设置为`top-bottom` ， `top-center`或`top-top` 。 `center`值和`bottom`值的三种这样的组合也是可能的。
 *  `data-aos-once` — You can also control if the animations should be played only when you get to a particular element the first time or every time you scroll up or down. By default, the animations are replayed every time the elements scroll into view. You can set the value of this attribute to `false` in order to animate the elements only once.
    
    `data-aos-once` —您也可以控制是否只在第一次访问特定元素时或每次向上或向下滚动时才播放动画。 默认情况下，每当元素滚动到视图中时，动画都会重播。 您可以将此属性的值设置为`false` ，以便仅对元素进行一次动画处理。

Below is an example of using `data-aos-anchor-placement`:

以下是使用`data-aos-anchor-placement`的示例：

See the Pen [Animate on Scroll Examples – Attributes II][Animate on Scroll Examples _ Attributes II] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[动画上滚动的例子-属性II][Animate on Scroll Examples _ Attributes II]由SitePoint( [@SitePoint][SitePoint] )上[CodePen][] 。

## 探索AOS图书馆的内部运作方式 **(**Exploring the AOS Library’s Inner Workings**)** ##

The aim of *Animate on Scroll* is to handle the logic and the animation separately. For this purpose, the logic is written inside the JavaScript but the animation is written inside the CSS. This separation permits us to write our own animations and modify them based on the needs of the project in a very clean and maintainable workflow.

*Scroll上*的*Animate*的目的是分别处理逻辑和动画。 为此，逻辑被编写在JavaScript中，而动画被编写在CSS中。 这种分离使我们可以编写自己的动画，并在非常干净且可维护的工作流中根据项目的需要对其进行修改。

The library keeps track of all the elements and their positions. This way it can dynamically add or remove the `aos-animate` class based on the settings that we have provided. For example, the `aos-animate` class is removed whenever the elements to which it is applied move out of the viewport. However, if an element has the value of `data-aos-once` set to `true`, the `aos-animate` class will not be removed from that particular element, thereby preventing any animation from happening on subsequent scroll events that bring the element into view.

该库跟踪所有元素及其位置。 这样，它可以根据我们提供的设置动态添加或删除`aos-animate`类。 例如，只要将要应用它的元素移出视口，就将`aos-animate`类移除。 但是，如果某个元素的`data-aos-once`设置为`true` ，则不会从该特定元素中删除`aos-animate`类，从而防止在使该元素出现的后续滚动事件中发生任何动画。

AOS also applies the default value of attributes to the `<body>` element on the HTML document. For example, `data-aos-easing` will be set to `ease` and `data-aos-duration` to `400` .

AOS还将属性的默认值应用于HTML文档上的`<body>`元素。 例如， `data-aos-easing`将被设定为`ease`和`data-aos-duration`至`400` 。

As I have already mentioned, the library applies animation duration only in the range of 50 to 3000 with steps of 50ms. This means that by default, you cannot have an animation duration of 225ms. However, you can add that duration yourself using CSS as follows:

正如我已经提到的，该库仅以50ms的步长在50到3000范围内应用动画持续时间。 这意味着默认情况下，动画持续时间不能为225ms。 但是，您可以使用CSS自己添加该持续时间，如下所示：

body[data-aos-duration='225'] [data-aos],
    [data-aos][data-aos][data-aos-duration='225']{
      transition-duration: 225ms;
    }

Adding your own custom animations to AOS is also quite straightforward.

将自己的自定义动画添加到AOS也是非常简单的。

Just create a `data-aos` attribute selector and set it to the name of your custom animation.

只需创建一个`data-aos`属性选择器并将其设置为自定义动画的名称即可。

Next, add the property you want to animate with its initial value, as well as the `transition` property set to the name of the property you want to animate.

接下来，添加要为其设置动画的属性的初始值，以及将`transition`属性设置为要设置动画的属性的名称。

For example, let’s say your animation is called *rotate-c* and the element to which it is applied is initially rotated by -180 degrees.

例如，假设您的动画称为*rotate-c* ，并且对其应用的元素最初被旋转-180度。

Here’s what your CSS should look like:

这是CSS的外观：

[data-aos="rotate-c"] {
      transform: rotate(-180deg);
      transition-property: transform;
    }

To set the final stage of your animation (in our example this will be the element rotating from -180 degrees to 0 degrees) you add the following CSS rule just below the previous one:

要设置动画的最后阶段(在我们的示例中，这将是从-180度旋转到0度的元素)，请在前一个规则的下方添加以下CSS规则：

[data-aos="rotate-c"].aos-animate {
      transform: rotate(0deg);
    }

Now add `data-aos="rotate-c"` to your chosen HTML element and this will rotate clockwise (from -180 degrees to 0 degrees) as users scroll that element into view.

现在将`data-aos="rotate-c"`到您选择HTML元素中，当用户将该元素滚动到视图中时，它将顺时针旋转(从-180度到0度)。

Here’s a live demo showing custom rotation animations both clockwise and anti-clockwise using the method above:

这是一个实时演示，使用上述方法显示了顺时针和逆时针的自定义旋转动画：

See the Pen [Animate on Scroll – Custom Animations][Animate on Scroll _ Custom Animations] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[滚动上][Animate on Scroll _ Custom Animations]的笔[动画–][Animate on Scroll _ Custom Animations] [CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [自定义动画][Animate on Scroll _ Custom Animations] 。

## 更多功能 **(**More Features**)** ##

The AOS library also provides a lot of other features that make it even more flexible and user friendly. Instead of providing attributes for each element separately, you can pass them as an object to the `init()` function. Here is an example:

AOS库还提供了许多其他功能，使其更加灵活和用户友好。 您可以将它们作为对象传递给`init()`函数，而不必为每个元素分别提供属性。 这是一个例子：

AOS.init({
      offset: 200,
      duration: 800,
      easing: 'ease-in-quad',
      delay: 100,
    });

You can also disable the animations on certain devices or under certain conditions using the `disable` key and setting its value to a device type like `mobile`, `phone` or `tablet`. Alternatively, you can also disable the library using a function.

您还可以使用`disable`键并将其值设置为`mobile` ， `phone`或`tablet`等设备类型，在某些设备上或在某些条件下禁用动画。 另外，您也可以使用函数禁用该库。

Here are two examples to illustrate both features:

下面是两个示例，以说明这两个功能：

AOS.init({
      disable: 'mobile'
    }); 
    
    AOS.init({
      disable: function () {
        var maxWidth = 800;
        return window.innerWidth < maxWidth;
      }
    });

In this Pen, when the screen is smaller than 800px, AOS animations are disabled using the function above:

在此笔中，当屏幕小于800px时，将使用上述功能禁用AOS动画：

See the Pen [Animate on Scroll Examples – Disable Animaions][Animate on Scroll Examples _ Disable Animaions] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见“ [滚动示例上][Animate on Scroll Examples _ Disable Animaions]的笔[动画” –][Animate on Scroll Examples _ Disable Animaions]在[CodePen][]上[禁用][Animate on Scroll Examples _ Disable Animaions] SitePoint( [@SitePoint][SitePoint] )的[动画][CodePen] 。

Besides `init()`, AOS also provides two additional functions: `refresh()` and `refreshHard()`.

除了`init()` ，AOS还提供了两个附加功能： `refresh()`和`refreshHard()` 。

`refresh()` is used to recalculate all elements’ offsets and positions. It is called automatically on events like window resize.

`refresh()`用于重新计算所有元素的偏移量和位置。 在诸如窗口调整大小之类的事件上会自动调用它。

`refreshHard()` is called automatically whenever new elements are programmatically removed from or added to the DOM. This way the library can keep the array of AOS elements updated. Once the array has been updated, `refreshHard()` also triggers the `refresh()` function to recalculate all the offsets.

每当以编程方式从DOM删除或将新元素添加到DOM时，都会自动调用`refreshHard()` 。 这样库就可以保持AOS元素数组的更新。 数组更新后， `refreshHard()`也会触发`refresh()`函数以重新计算所有偏移量。

## 结论 **(**Conclusion**)** ##

This tutorial has introduced you the *Animate on Scroll* library which you can use to animate elements as you scroll up or down the webpage.

本教程为您介绍了*“滚动上*的*动画”*库，当您向上或向下滚动网页时，可使用该动画为元素设置动画。

Having no dependencies and letting you create your own custom animations are two features that make AOS a great choice of library for scrolling animations.

没有依赖关系，并允许您创建自己的自定义动画，这是两个功能，这些特性使AOS成为滚动动画的库的绝佳选择。

If you’re interested in JavaScript animation, you might also like to check out [JS with Performance: requestAnimationFrame][JS with Performance_ requestAnimationFrame] by Tim Evko.

如果您对JavaScript动画感兴趣，您可能还想看看Tim [Performance的JS with Performance：requestAnimationFrame][JS with Performance_ requestAnimationFrame] 。

**Have your ever tried AOS in a project? How was your experience? Feel free to share some tips with fellow readers.**

**您是否曾在项目中尝试过AOS？** **您的经历如何？** **随时与其他读者分享一些技巧。**

> 翻译自: [https://www.sitepoint.com/cool-scroll-animations-made-easy-aos-library/][https_www.sitepoint.com_cool-scroll-animations-made-easy-aos-library]

aos.js动画

[Cool On Scroll Animations with AOS Library]: /images/20221123/e8d9248650e644618ce63647e293b35a.png
[AOS]: https://michalsnik.github.io/aos/
[Bower]: https://bower.io/
[npm]: https://www.npmjs.com/
[Animate on Scroll Examples]: https://codepen.io/SitePoint/pen/qmvxoL/
[SitePoint]: https://codepen.io/SitePoint
[CodePen]: https://codepen.io
[project_s Readme file on GitHub]: https://github.com/michalsnik/aos#easing-functions
[Animate on Scroll Examples _ Attributes]: https://codepen.io/SitePoint/pen/LyaQXv/
[Animate on Scroll Examples _ Attributes II]: https://codepen.io/SitePoint/pen/jmJZRG/
[Animate on Scroll _ Custom Animations]: https://codepen.io/SitePoint/pen/MmxQMG/
[Animate on Scroll Examples _ Disable Animaions]: https://codepen.io/SitePoint/pen/pPYLvL/
[JS with Performance_ requestAnimationFrame]: https://www.sitepoint.com/premium/screencasts/js-with-performance-requestanimationframe%0A
[https_www.sitepoint.com_cool-scroll-animations-made-easy-aos-library]: https://www.sitepoint.com/cool-scroll-animations-made-easy-aos-library/