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> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></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> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span></span>

在上面的代碼中，聲明句子說：

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

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

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

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

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

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

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

>

<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span></span>

這是我們到目前為止所擁有的演示：

>

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

創建寄存器屏幕

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

>：

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

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

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

然後，我們將修改寄存器鏈接的data-anijs屬性：>

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

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

<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span></span>

>請參閱codepen上的sitepoint（@sitepoint）的筆zdjlc。

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

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

>這是一個帶有新代碼的演示：

<span><span><span><div> class<span>="container"</span>>

    <span><span><span><div> id<span>="divLogin"</span> class<span>="login_screen"</span>>
      <span><span><span><h2 id="id-span-spnLogin-span-gt"> id<span>="spnLogin"</span>></h2></span>Sign In<span><span></span>></span>
</span>      <span><span><span><input> id<span>="txtLoginId"</span> type<span>="text"</span> placeholder<span>="Email Id"</span> /></span>
</span>      <span><span><span><input> id<span>="txtLoginPass"</span> type<span>="password"</span> placeholder<span>="Password"</span> /></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="btn"</span>></a></span>
</span>        SignIn
      <span><span><span></span>></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="signup-link"</span>></a></span>Register?<span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span><!-- .login-screen -->
</span>
<span><span><span></span></span></span>
</div></span>></span><!-- .container --></span>

>

>

>編輯器注：下面的演示似乎無法在這些嵌入中正確起作用100％，尤其是當您嘗試在“登錄”和“寄存器”之間多次切換時。嘗試Codepen框架中的“編輯”鏈接以查看完整的演示，在此工作正常。

<span><span><span><a> href<span>="#"</span> 
</a></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></span>></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> href<span>="#"</span>
</a></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></span>></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中文網其他相關文章！