アニメーションは、プログラムを?qū)Wんでいる學(xué)生の間で常にホットなお?dú)荬巳毪辘扦筏?。私が出席した最近の週末のWeb開発ワークショップで、CSSを使用したアニメーションについての議論がありました。それは、CSSアニメーションの宣言的な取り扱いライブラリであるAnijsにつまずいたときでした。 このチュートリアルでは、Anijsが何であるか、それを使用してクールなアニメーション効果を作成する方法を確認(rèn)します。

Anijsは、HTMLで直接記述されたシンプルで宣言的なコマンドを使用してアニメーションを作成し、アニメーションの管理を簡素化するCSSアニメーションの宣言的ハンドリングライブラリです。

Anijsを使用して、アニメーションを使用してWebアプリケーションを強(qiáng)化できます。このチュートリアルでは、シンプルなユーザー登録とログインアプリの例を使用して、ログイン畫面を作成し、サインインプロセスを検証し、Anijsを使用してアニメーションでレジスタ畫面を作成する方法を示します。
• ライブラリは、「前」のキーワードを使用してアニメーションの前後に関數(shù)を呼び出す機(jī)能も提供します。これは、アニメーションを?qū)g行する前にフォームエントリを検証したり、アニメーションを?qū)g行する前に異なる畫面を表示して隠したりするなど、アニメーションのフローを制御するために使用できます。
• anijsの紹介
ANIJSを使用して、HTMLで宣言的コマンドを使用してアニメーションを書くことができます。ロジックを表現(xiàn)する宣言を使用して、アニメーションを管理する簡単な方法を提供します。以下は、ANIJS宣言的構(gòu)文の例です
• 上記のコードでは、宣言的な構(gòu)文によると、
に焦點(diǎn)を合わせている場合は、アンカータグ要素にぐらつきをします。
• 始めましょう
このチュートリアルの過程で、Anijsを使用してアニメーションで拡張されたアプリを作成します。このアプリは、Anijsを使用したアニメーションを含む簡単なユーザー登録およびログインアプリになります。このチュートリアルの主な焦點(diǎn)は、Anijsを使用してWebアプリでアニメーションを機(jī)能させる方法です。

スタイリングのために、ダン?エデンによるanimate.css librayを使用します。

<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>

最初に、ユーザーがログインする畫面を作成します。これがHTML：です

CodepenのSitePoint（@SitePoint）によるペン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>

CodepenでSitePoint（@SitePoint）によるペンAnijsデモ、失敗したログインを參照してください。 上記のデモでは、有効なサインインまたは無効なサインインがあるかどうかに関係なく、ボタンがクリックされるとアニメーションが機(jī)能します。それは本當(dāng)に私たちが望むものではないので、既存のコードを変更して、無効なサインインでのみアニメーション化しましょう。 サインインが有効かどうかを確認(rèn)するには、アニメーションの前に検証機(jī)能を呼び出す必要があります。このために、Beforeキーワードを使用します。アニメーションの前後の関數(shù)を呼び出すことに関連する詳細(xì)なドキュメントは、Anijsドキュメントに記載されています。イベントオブジェクトを渡して、アニメーションとAnimationContextをトリガーします。 最初に、Anijsヘルパーを定義し、その後アニメーション関數(shù)を宣言します。関數(shù)の外観は次のとおりです

これが私たちがこれまでに持っているもののデモです：

codepenのSitePoint（@sitepoint）でSigninボタンを検証するペン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><input</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span>

上記のコードには、サインアップリンクがクリックされたら、reg_screen（これはレジスタ畫面）のクラスを持つ要素にRollinアニメーションを?qū)g行します。ただし、レジスタ畫面が非表示になっているため、これは機(jī)能しません。

<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を參照してください。

レジスタ畫面を表示できるようになったため、レジスタ畫面のログインリンクを元のログイン畫面に接続する必要があります。ここに関數(shù)があります：

<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>

<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>

<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>

<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：CSSアニメーション用の宣言的な取り扱いライブラリの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。