使用AOS库变得容易滚动动画

作为前端开发人员，您可能会从客户那里获得的一个流行请求是在页面滚动中实现惊人的动画效果。有许多库可以使我们更容易这项任务。 AOS，也称为Animate在Scroll上，就是这样的库，它确实可以做到它的名称：它使您可以将不同种类的动画应用于“元素”滚动时。

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

钥匙要点

scroll（aos）库上的动画是前端开发人员轻松创建滚动动画的有用工具，提供了一系列动画类型，例如淡出，翻转和幻灯片。

>
• >可以使用Bower或NPM安装AOS库，并使用一行代码初始化。一旦初始化，可以通过将特定属性添加到HTML元素来应用动画。> AOS允许开发人员使用数据属性（例如Data-Aos-Offset，Data-Aos-Duration和Data-Aos-easoning）配置动画。它还提供了根据其他元素的位置触发动画的选项，更改动画的默认行为，并控制是否应一次或每次元素滚动播放一次动画。
>
• > AOS库将逻辑和动画分开，以提供清洁，可维护的工作流程。它跟踪元素及其位置，根据所提供的设置动态添加或删除AOS生动类。该库还允许创建自定义动画，并提供用于在某些设备或特定条件下禁用动画的功能。
>
如何安装AOS库
您可以使用Bower或NPM安装AOS。

鲍尔：

npm：

bower <span>install aos --save</span>

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

<span>npm install aos --save</span>

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

CSS：

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
</span><span><span><span><script> src<span >="bower_components/aos/dist/aos.js"</script></span>></span><span><span></span>></span></span></span>

> javascript：

<span><span><span><link> href<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"</span> rel<span>="stylesheet"</span>></span></span></span>

就是这样，没有其他依赖性，这有助于保持您的网站的性能。

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

<span><span><span><script> src<span >="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"</script></span>></span><span><span></span>></span></span>

开始使用AOS

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

要使用基本动画，您只需要将data-aos =“ animation_name”添加到您的html元素。

>

您可以选择几种类型的动画。例如，您可以添加淡出的动画，例如“淡出”，“淡入淡出”和“淡入淡出的左派”。同样，您还可以添加翻转和滑动动画，例如“翻转”，“ flip-left”，“ slide down”和“ slide-right”。

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

bower <span>install aos --save</span>

除了上一节中的初始化行之外，对元素进行动画不需要您做其他任何事情。

请查看以上行动中的代码：

>

请参阅codepen上的sitepoint（@sitepoint）上的滚动示例中的动画。

>使用AOS数据属性配置动画

>让我们深入研究可以用来配置动画的数据属性的列表。

> data-aos offset - 您可以使用此属性迟早触发动画。它的默认值为120px。
data-aos-duration - 您可以使用此属性来指定动画的持续时间。持续时间值可以在50至3000之间，步骤为50ms。由于持续时间是在CSS中处理的，因此使用较小的步骤或更宽的范围会不必要地增加CSS代码的大小。对于几乎所有动画，此范围就足够了。此属性的默认值为400。
• > data-aos-easoning - 您可以使用此属性来控制动画不同元素的时序函数。可能的值是：线性，易于入口和易于何时。您可以在GitHub上的项目的readme文件上查看所有接受值的列表。
>
以下是使用数据效力和数据eaos-easoning的示例：>

>请参阅滚动示例上的动画 - codepen上的sitepoint（@sitepoint）属性。

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

• data-aos-handor - 当您想基于其他元素的位置触发动画时，此属性很有用。它接受任何选择器作为其值。默认值为null。这意味着所有动画都将相对于元素自己的位置触发。
> data-aos-banker-placement - 默认情况下，元素上的动画在其顶部到达窗口的底部后立即应用。可以使用Data-AOS-ander-placement属性更改此行为。作为其价值，此属性接受两个连字符分开的单词。例如，您可以将其设置为顶部，顶部或顶部。中心值和底部值也可以进行三种这样的组合。
• >
> data-aos-once - 您还可以控制只有在第一次或每次向上或向下滚动到特定元素时才能播放动画。默认情况下，每次元素滚动到视图时都会重播动画。您可以将此属性的值设置为false，以便仅动画一次元素。
以下是使用data-aos-andor-placement的示例：>

>请参阅滚动示例上的动画 - 属性ii by sitepoint（@sitepoint）在codepen上。

探索AOS库的内部工作

在卷轴上动画的目的是分别处理逻辑和动画。为此，逻辑是在JavaScript中写入的，但动画是在CSS内写的。这种分离使我们能够在非常干净且可维护的工作流程中根据项目的需求编写自己的动画并根据项目的需求进行修改。

>图书馆跟踪所有元素及其位置。这样，它可以根据我们提供的设置动态添加或删除AOS生动类。例如，每当将其应用的元素移出视口时，就会删除AOS-ANIMATE类。但是，如果一个元素具有将数据设置为true的数据值的值，则AOS-ANIMATE类将不会从该特定元素中删除，从而阻止在随后的滚动事件中发生任何动画，从而使该元素进入元素。 🎜> AO还将属性的默认值应用于HTML文档上的

元素。例如，将设置数据驱动器以简化和数据效率为400。 正如我已经提到的那样，该库仅在50至3000的范围内应用动画持续时间，步骤为50ms。这意味着默认情况下，您的动画持续时间为225ms。但是，您可以使用CSS自己添加该持续时间，如下所示：

>将自己的自定义动画添加到AOS也很简单。

只需创建一个Data-aos属性选择器，然后将其设置为自定义动画的名称。

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

例如，假设您的动画称为旋转-C，并且所应用的元素最初旋转-180度。

这是您的CSS的样子：

bower <span>install aos --save</span>

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

>

<span>npm install aos --save</span>

现在，将data-aos =“ rotate-c”添加到您选择的HTML元素中，并且随着用户将该元素滚动到视图时，这将顺时针旋转（从-180度到0度）。

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

请参阅滚动上的笔画 - codepen上的sitepoint（@sitepoint）自定义动画。

更多功能

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

>您还可以使用禁用键在某些设备或某些条件下禁用动画，并将其值设置为移动，电话或平板电脑等设备类型。另外，您也可以使用函数禁用库。

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
</span><span><span><span><script> src<span >="bower_components/aos/dist/aos.js"</script></span>></span><span><span></span>></span></span></span>

>

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

在这支笔中，当屏幕小于800px时，使用以上功能禁用AOS动画：

<span><span><span><link> href<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"</span> rel<span>="stylesheet"</span>></span></span></span>

请参阅滚动示例上的笔动画 - codepen上的sitepoint（@sitepoint）禁用动画。

除了INIT（）外，AOS还提供了两个其他功能：refresh（）和Refreshhard（）。

refresh（）用于重新计算所有元素的偏移和位置。它在窗口大小之类的事件上被自动称为

> 每当将新元素从编程中删除或添加到DOM时，

refreshhard（）被自动称为。这样，库可以将AOS元素的数组更新。阵列更新后，Refreshhard（）还会触发RefResh（）函数以重新计算所有偏移。

结论

本教程向您介绍了您在滚动库上的动画，您可以在您滚动或向下滚动网页时使用它来为元素进行动画。 没有依赖关系，让您创建自己的自定义动画是两个使AOS成为滚动动画库的绝佳选择的功能。

如果您对JavaScript动画感兴趣，则可能还想检查具有绩效的JS：tim evko的requestAnimationFrame。

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

使用AOS库

>如何在项目中安装AOS库？

在项目中安装AOS库，您需要使用NPM（Node Package Manager）。打开终端并导航到您的项目目录。然后，键入以下命令：NPM安装AOS -SAVE。此命令将安装AOS库并将其保存在您的项目依赖项中。安装后，您可以使用“ AOS”导入AO将其导入项目；并使用aos.init（）;。

初始化它，我可以自定义AOS动画吗？ AOS库提供了几种数据属性，您可以使用这些属性来自定义动画。例如，您可以使用Data-aos-duration设置动画的持续时间，Data-aos-delay在动画启动之前设置延迟，而Data-aos-offset则可以设置与页面顶部的距离动画应启动。

如何将aos与vue.js？

一起使用vue.js，您需要在vue.js project中安装AOS库。安装后，您可以将其导入到vue.js组件中，并在安装的生命周期挂钩中初始化它。然后，您可以使用html中的AOS数据属性应用动画。

>我如何将AOS与React.js？

>使用AOS与React.js一起使用，您需要安装您的react.js项目中的AOS库。安装后，您可以将其导入React.js组件，并以ComponentDidmount LifeCycle方法初始化。然后，您可以使用JSX中的AOS数据属性应用动画。

我可以将AOS与伪元素一起使用吗？

不幸的是，AOS不支持伪元素上的动画。这是因为伪元素不是实际的DOM元素，不能通过JavaScript直接操纵AOS应用动画的JavaScript。有AOS问题，您可以做几件事。首先，确保您已经正确安装并初始化了AOS库。其次，检查您的HTML是否可能阻止动画工作的任何语法错误。第三，使用浏览器的开发人员工具检查元素并查看是否应用了AOS类。

>

>我可以在移动设备上使用AO吗？但是，请记住，动画可能是资源密集型的，并且在较旧或低端设备上可能表现不佳。您可以使用禁用选项（如果需要）在某些设备上禁用动画。

如何更新AOS库？

更新AOS库，您可以使用NPM。打开终端，导航到项目目录，然后键入以下命令：NPM Update AOS。此命令将将AOS库更新为最新版本。

我可以将AOS与其他JavaScript库一起使用吗？

是的，您可以将AOS与其他JavaScript库一起使用。但是，请确保其他库不会干扰AOS动画。如果您遇到问题，请尝试禁用其他库，以查看它们是否引起问题。

>

>我如何卸载AOS库？

以卸载AOS库，您可以使用NPM。打开终端，导航到项目目录，然后键入以下命令：NPM卸载AOS。此命令将从您的项目中删除AOS库。

>

以上是使用AOS库变得容易滚动动画的详细内容。更多信息请关注PHP中文网其他相关文章！