aos.js动画

tech2022-10-21 139

aos.js动画

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) on CodePen.

请参见CodePen上的SitePoint ( @SitePoint )上的“ 滚动示例上的笔动画” 。

使用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.

data-aos-easing —您可以使用此属性来控制对不同元素进行动画处理的定时功能。可能的值为： linear ， ease-in-out ease-out-quart 。您可以在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 by SitePoint (@SitePoint) on CodePen.

请参见“ 滚动示例上的笔动画” – CodePen上SitePoint ( @SitePoint )的属性。

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 by SitePoint (@SitePoint) on CodePen.

见笔动画上滚动的例子-属性II由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 by SitePoint (@SitePoint) on CodePen.

请参见滚动上的笔动画– CodePen上的SitePoint ( @SitePoint ) 自定义动画。

结论 (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 by Tim Evko.

如果您对JavaScript动画感兴趣，您可能还想看看Tim Performance的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/

aos.js动画

aos.js动画

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

AOS入门 (Getting Started With AOS)

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

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

更多功能 (More Features)

结论 (Conclusion)