搜尋

首頁 >web前端 >js教程 >ANIJS：CSS動畫的聲明性處理庫

ANIJS：CSS動畫的聲明性處理庫

Joseph Gordon-Levitt
Joseph Gordon-Levitt原創
2025-02-21 09:22:13933瀏覽

AniJS: A Declarative Handling Library for CSS Animations

ANIJS：CSS動畫的聲明性處理庫

在學習編程的學生中，動畫一直是學生的最愛。在我參加的最近的周末網絡開發研討會上，討論了使用CSS的動畫。那是當我偶然發現Anijs的時候，Anijs是CSS動畫的聲明性處理庫。

在本教程中，我們將看到Anijs的全部內容以及如何使用它來創建一些很酷的動畫效果。 >

鑰匙要點

anijs是CSS動畫的聲明性處理庫，允許使用直接寫在HTML中的簡單聲明的命令創建動畫，簡化了動畫的管理。

>庫在HTML5數據屬性中使用一個自定義屬性，稱為Data-Anijs來創建動畫的聲明語句。例如，代碼`

`表示如果輸入字段焦點，它將對錨標記元素進行“ Wobble”動畫。 > Anijs可用於使用動畫增強Web應用程序。本教程使用了簡單的用戶註冊和登錄應用程序的示例，演示瞭如何創建登錄屏幕，驗證登錄過程以及使用Anijs使用動畫創建寄存器屏幕。
    >庫還提供了使用“之前”關鍵字在動畫之前和之後調用功能的功能。這可以用於控制動畫的流程，例如在運行動畫之前驗證表單條目，或者在運行動畫之前顯示和隱藏不同的屏幕。
    • Anijs 簡介 使用anijs，我們可以使用html中的聲明命令編寫動畫。它提供了一種使用表達邏輯的聲明來管理動畫的簡便方法。以下是Anijs聲明語法的一個示例：
  • 在上面的代碼中，聲明語法說：
    • 如果專注於焦點，請對錨標記元素進行搖擺。
    • >
入門

在本教程的過程中，我們將使用Anijs創建一個動畫來創建一個應用程序。該應用將是一個簡單的用戶註冊和登錄應用程序，它將使用ANIJS包括一些動畫。本教程的主要重點是我們如何使用Anijs在Web應用中工作。

。

開始，下載anijs並將其包含在您的頁面中，或引用CDN版本。 

<span><span><span><input</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span>
用於樣式，我們將使用andate.css libray by dan Eden。

創建登錄屏幕

首先，我們將創建一個屏幕供用戶登錄。這是html：

到目前為止，我們擁有的只是一個靜態登錄頁面。有了一些CSS，看起來像這樣：

>請參閱codepen上的sitepoint（@sitepoint）的pen anijs教程，

上的靜態登錄屏幕（@sitepoint）

我們已經創建了屏幕，現在我們需要驗證登錄過程。為了附加動畫效果，我們使用特定元素上的數據anijs屬性。我們使用稱為data-anijs的自定義屬性使用HTML5數據屬性編寫聲明語句。讓我們將此屬性添加到簽名按鈕中，如下所示：

> 
<span><span><span><input</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span>
在上面的代碼中，聲明句子說：

單擊“登錄”按鈕時，使用類別.login_screen對元素進行鉸鏈動畫。因此，當我們單擊按鈕時，鉸鏈動畫會生效，正如您通過單擊下面的演示中的簽名按鈕所看到的：

請參閱pen anijs演示，在codepen上通過sitepoint（@sitepoint）登錄失敗。

在上述演示中，當按鈕被單擊時，無論有效還是無效的登錄，動畫都可以使用。這並不是我們想要的，所以讓我們修改現有代碼以僅在無效的登錄中進行動畫。

為了檢查登錄是否有效，我們需要在動畫之前調用validation函數。為此，我們將使用之前的關鍵字。在ANIJS文檔中可以找到與調用動畫之前和之後的函數有關的詳細文檔。我們將通過事件對像傳遞到觸發動畫以及動畫context。 首先，我們將定義Anijs助手，然後聲明動畫函數。這是函數的外觀：

>我們還將修改signin按鈕的數據屬性以包括之前的動畫函數，如下所示：

<span><span><span><script</span> src<span>="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</span>></span><span><span></script</span>></span></span>

>現在，只有在電子郵件或密碼字段為空的情況下，動畫才會發生。使用AnimationContext.run（）命令在上方的JavaScript代碼塊中運行動畫。如果輸入了電子郵件和密碼，則將顯示“處理……”消息。

> 
<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span>
這是我們到目前為止所擁有的演示：

>

>請參閱pen anijs演示，通過codepen上的sitepoint（@sitepoint）驗證簽名按鈕。

創建寄存器屏幕

接下來，我們將為我們的應用創建一個寄存器（或註冊）頁面。如您所見，我們在登錄頁面上已經有一個寄存器鏈接。我們要做的就是將一些動畫和事件附加到寄存器鏈接。首先，將寄存器頁面的以下HTML添加到我們現有的HTML： 注意帶有顯示的內聯CSS：.REG_SCREEN元素上的無，這使該屏幕默認隱藏了。要將登錄屏幕中的寄存器鏈接連接到此新屏幕，我們將data-anijs屬性添加到鏈接：

>：

<span><span><span><input</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span>

>上面的代碼單擊註冊鏈接時，在具有reg_screen類別的元素上進行滾動動畫（這是我們的寄存器屏幕）。但這是行不通的，因為寄存器屏幕被隱藏了。

我們需要做的是在動畫發生之前調用功能。在該功能中，我們在可見寄存器屏幕時隱藏登錄屏幕。然後我們運行動畫。這是javaScript：

然後，我們將修改寄存器鏈接的data-anijs屬性：> 
<span><span><span><script</span> src<span>="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</span>></span><span><span></script</span>></span></span>

這是一個帶有我們新添加的代碼的演示：

<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span>
>請參閱codepen上的sitepoint（@sitepoint）的筆zdjlc。

>現在可以使寄存器屏幕可見，我們還需要將寄存器屏幕中的登錄鏈接連接到原始登錄屏幕，類似於我們剛剛為寄存器屏幕所做的操作。這是函數：

>這是登錄鏈接的修改數據-Anijs屬性：>

>這是一個帶有新代碼的演示：
<span><span><span><div</span> class<span>="container"</span>></span>
</span>
    <span><span><span><div</span> id<span>="divLogin"</span> class<span>="login_screen"</span>></span>
</span>      <span><span><span><h2</span> id<span>="spnLogin"</span>></span>Sign In<span><span></h2</span>></span>
</span>      <span><span><span><input</span> id<span>="txtLoginId"</span> type<span>="text"</span> placeholder<span>="Email Id"</span> /></span>
</span>      <span><span><span><input</span> id<span>="txtLoginPass"</span> type<span>="password"</span> placeholder<span>="Password"</span> /></span>
</span>      <span><span><span><a</span> href<span>="#"</span> class<span>="btn"</span>></span>
</span>        SignIn
      <span><span><span></a</span>></span>
</span>      <span><span><span><a</span> href<span>="#"</span> class<span>="signup-link"</span>></span>Register?<span><span></a</span>></span>
</span>    <span><span><span></div</span>></span><!-- .login-screen -->
</span>
<span><span><span></div</span>></span><!-- .container --></span>
>

>

>編輯器注：下面的演示似乎無法在這些嵌入中正確起作用100％，尤其是當您嘗試在“登錄”和“寄存器”之間多次切換時。嘗試Codepen框架中的“編輯”鏈接以查看完整的演示，在此工作正常。 
<span><span><span><a</span> href<span>="#"</span> 
</span></span><span>   <span>class<span>="btn"</span> 
</span></span><span>   <span>data-anijs<span>="if: click, do: hinge animated, to: .login_screen"</span>></span>
</span>  SignIn
<span><span><span></a</span>></span></span>
>請參閱pen anijs演示，在codepen上按SitePoint（@sitepoint）顯示登錄和顯示登記冊。

與我們在登錄屏幕中所做的類似，我們將使用一個函數驗證寄存器表單：

通常，我們通常會在變量中緩存許多這些對象，而不是重複對它們的引用。我們只是為這個簡單的示例而這樣做。 >

>最後，讓我們修改html中的data-anijs屬性以包括動畫和函數調用。

>

這是我們的最終演示：

<span>var animationHelper = AniJS.getHelper(),
</span>    spnLogin <span>= document.getElementById('spnLogin');
</span>
animationHelper<span>.validateLogin = function (e<span>, animationContext</span>) {
</span>    <span>var email = document.getElementById('txtLoginId').value;
</span>    <span>var pass = document.getElementById('txtLoginPass').value;
</span>    <span>if (email && pass) {
</span>      spnLogin<span>.innerHTML = 'Processing...';
</span>    <span>} else {
</span>      spnLogin<span>.innerHTML = 'Fill Required fields.';
</span>      animationContext<span>.run();
</span>    <span>}
</span><span>}</span>
請參閱codepen上的sitepoint（@sitepoint）的pen anijs演示。

結論

在本教程中，我們討論的只是一個偷偷摸摸地進入這個很棒的圖書館。有關其使用情況的深入信息可在Anijs文檔中獲得。 
<span><span><span><a</span> href<span>="#"</span>
</span></span><span>   <span>class<span>="btn"</span>
</span></span><span>   <span>data-anijs<span>="if: click, do: hinge animated, to: .login_screen, before: validateLogin"</span>></span>
</span>  SignIn
<span><span><span></a</span>></span></span>
經常詢問的問題（常見問題解答）

什麼是Anijs，它如何工作？ anijs是CSS動畫的聲明性處理庫。它允許開發人員使用簡單而直觀的語法創建動畫，而無需編寫複雜的JavaScript代碼。 ANIJS通過在您的HTML元素中解析數據anijs屬性並執行相應的動畫來工作。這使得管理和控制動畫變得更容易，因為您可以直接在html中定義它們。

>

>如何安裝anijs？

安裝Anijs很簡單。您可以直接從GitHub存儲庫下載它，也可以使用NPM或Bower等軟件包管理器。下載後，您只需要在HTML文件中包含ANIJS腳本即可。然後，您可以通過將data-anijs屬性添加到您的html元素來開始使用anijs。

>

>我可以與其他JavaScript庫一起使用anijs？庫。它不會干擾其他庫的功能，您可以與諸如jQuery，react或Angular之類的庫一起使用。這使Anijs成為在各種Web開發環境中創建動畫的多功能工具。

如何使用anijs創建動畫？

>使用anijs創建動畫涉及添加data-anijs屬性HTML元素並定義動畫參數。 Data-Anijs屬性使用的簡單語法指定事件，動畫元素，應用動畫和回調函數。您還可以使用ANIJS助手函數來控制動畫流。

>我可以使用Anijs創建哪些類型的動畫？

anijs anijs支持廣泛的CSS動畫。您可以創建簡單的動畫，例如淡出和幻燈片，以及涉及轉換和過渡的更複雜的動畫。 ANIJS還支持動畫鏈，使您可以創建以特定順序執行的動畫序列。

我可以使用anijs進行響應式設計嗎？

是的，可以將anijs用於響應式設計。使用ANIJS創建的動畫基於CSS，這意味著它們可以縮放並適應不同的屏幕尺寸和分辨率。這使ANIJS成為創建在台式機和移動設備上都可以正常工作的動畫的有用工具。

如何控制Anijs中動畫的時間？

anijs anijs提供了幾種控制時間的方法動畫。您可以在data-anijs屬性中指定動畫的持續時間，並且可以使用延遲功能在一定時間內暫停動畫。您還可以使用ANIJS助手函數來控制動畫流和時機。

我可以使用anijs動畫svg元素嗎？

是的，可以使用anijs來動畫SVG元素。您可以像常規的HTML元素一樣，將相同的動畫參數和控制方法應用於SVG元素。這使您可以創建涉及SVG圖形和形狀的複雜動畫。

>

>如何調試Anijs中的動畫？ 在anijs中調試動畫涉及檢查數據anijs屬性和CSS的語法動畫屬性。如果動畫無法正常工作，則可以使用瀏覽器的開發人員工具來檢查HTML元素並檢查應用的CSS屬性。您還可以檢查JavaScript控制台是否與Anijs相關的任何錯誤消息。

>

我可以為Anijs的發展做出貢獻嗎？您可以通過報告錯誤，建議新功能，改進文檔或提交代碼改進的拉請請求來做出貢獻。您可以找到有關如何在Anijs GitHub頁面上做出貢獻的更多信息。

>

以上是ANIJS：CSS動畫的聲明性處理庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html5 jquery css html npm angular express Static Object define if switch for while include try Validating Error register using class Attribute Event console function default this display animation input github Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：app.js的介紹 - 移動網絡應用程序變得容易下一篇：app.js的介紹 - 移動網絡應用程序變得容易

相關文章

看更多