使用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中文網其他相關文章！