ANIJS: une bibliothèque de traitement déclarative pour les animations CSS

L'animation a toujours été un favori chaud parmi les élèves qui apprennent à programmer. Au cours d'un récent atelier de développement Web de week-end auquel j'ai assisté, il y a eu une discussion sur les animations utilisant CSS. C'est à ce moment que je suis tombé sur ANIJS, ​​une bibliothèque de manipulation déclarative pour CSS Animations.

Dans ce tutoriel, nous verrons ce qu'est ANIJS et comment l'utiliser pour créer des effets d'animation sympas.

Les plats clés

• ANIJS est une bibliothèque de gestion déclarative pour les animations CSS qui permet de créer des animations à l'aide de commandes déclaratives simples écrites directement dans HTML, simplifiant la gestion des animations.
• La bibliothèque utilise un attribut personnalisé appelé Data-Anijs dans les attributs de données HTML5 pour créer des instructions déclaratives pour les animations. Par exemple, le code `` signifie que si le champ de saisie est concentré, il fera une animation «oscillation» à un élément de balise d'ancrage.
• ANIJS peut être utilisé pour améliorer les applications Web avec des animations. Le didacticiel utilise l'exemple d'une application d'enregistrement et de connexion utilisateur simple, démontrant comment créer un écran de connexion, valider le processus de connexion et créer un écran de registre avec des animations à l'aide d'Anijs.
• La bibliothèque offre également la possibilité d'appeler une fonction avant et après les animations en utilisant le mot-clé «avant». Cela peut être utilisé pour contrôler le flux d'animations, tels que la validation des entrées de formulaire avant d'exécuter une animation ou de montrer et de cacher différents écrans avant d'exécuter une animation.

Introduction aux anijs

En utilisant des ANIJ, nous pouvons écrire des animations en utilisant des commandes déclaratives directement dans notre HTML. Il fournit un moyen plus facile de gérer les animations à l'aide de déclarations qui expriment la logique. Vous trouverez ci-dessous un exemple de la syntaxe déclarative 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>

Dans le code ci-dessus, la syntaxe déclarative dit, si elle est focalisée, faites une oscillation à un élément de balise d'ancrage.

Pour commencer

Au cours de ce tutoriel, nous créerons une application améliorée avec des animations à l'aide d'ANIJ. Cette application sera une simple application d'enregistrement et de connexion des utilisateurs qui comprendra certaines animations à l'aide d'ANIJ. L'objectif principal de ce tutoriel est de savoir comment nous pouvons faire fonctionner les animations dans nos applications Web en utilisant des anijs.

Pour commencer, téléchargez les ANIJ et incluez-le dans votre page, ou référennez la version CDN.

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

Pour le style, nous utiliserons la bibliothèque animate.css de Dan Eden.

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

Création de l'écran de connexion

Nous allons d'abord créer un écran pour que l'utilisateur se connecte. Voici le HTML:

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

Ce que nous avons jusqu'à présent n'est qu'une page de connexion statique. Avec certains CSS, cela ressemble à ceci:

Voir le tutoriel PEN ANIJS, ​​écran de connexion statique par SitePoint (@SitePoint) sur Codepen.

Nous avons créé notre écran, maintenant nous devons valider le processus de connexion. Afin de joindre l'effet animé, nous utilisons l'attribut Data-Anijs sur l'élément particulier. Nous écrivons nos instructions déclaratives à l'aide d'attributs de données HTML5, en utilisant un attribut personnalisé appelé Data-Anijs. Ajoutons cet attribut au bouton Signin, comme indiqué ci-dessous:

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

Dans le code ci-dessus, la phrase déclarative dit: Lorsque le bouton de connexion est cliqué, faites une animation de charnière à l'élément avec la classe .login_screen . Ainsi, lorsque nous cliquons sur le bouton, l'animation de charnière prend effet, comme vous pouvez le voir en cliquant sur le bouton Signin dans la démo ci-dessous:

Voir la démo des anijs du stylo, défaillance de la connexion par SitePoint (@SitePoint) sur Codepen.

Dans la démo ci-dessus, l'animation fonctionne lorsque le bouton est cliqué, qu'il y ait une connexion valide ou non valide. Ce n'est pas vraiment ce que nous voulons, alors modifions le code existant pour animer uniquement sur une connexion non valide.

Afin de vérifier si la connexion est valide, nous devons appeler une fonction valide avant l'animation. Pour cela, nous utiliserons le mot-clé avant. Une documentation détaillée liée à l'appel d'une fonction avant et après les animations peut être trouvée dans les documents ANIJS. Nous passerons dans l'objet de l'événement pour déclencher l'animation, ainsi que l'animationContext.

Tout d'abord, nous définirons l'assistant ANIJS, ​​puis nous déclarerons la fonction d'animation avant. Voici à quoi ressemble la fonction:

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

Nous allons également modifier l'attribut de données du bouton Signin pour inclure la fonction d'animation avant, comme indiqué ci-dessous:

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

Maintenant, l'animation n'aura lieu que si le champ Email ou Mot de passe est vide. L'animation est exécutée à l'aide de la commande AnimationContext.run () dans le bloc de code JavaScript ci-dessus. Si un e-mail et un mot de passe sont entrés, il affichera un message «Traitement…».

Voici une démo de ce que nous avons jusqu'à présent:

Voir la démo des anijs stylo, validant le bouton Signin par SitePoint (@SitePoint) sur Codepen.

Création de l'écran de registre

Ensuite, nous créerons une page de registre (ou d'inscription) pour notre application. Comme vous pouvez le voir, nous avons déjà un lien de registre sur notre page de connexion. Ce que nous ferons, c'est joindre des animations et des événements au lien de registre. Tout d'abord, ajoutez le HTML suivant pour la page de registre à notre HTML existant:

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

Remarquez le CSS en ligne avec l'affichage: aucun sur l'élément .Reg_screen, qui rend cet écran caché par défaut. Pour connecter le lien d'enregistrement dans l'écran de connexion à ce nouvel écran, nous ajouterons l'attribut Data-Anijs au lien:

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

Le code ci-dessus dit Lorsque le lien d'inscription est cliqué, faites une animation rollin sur l'élément qui a une classe de reg_screen (qui est notre écran de registre). Mais cela ne fonctionnera pas, car l'écran de registre est caché.

Ce que nous devons faire, c'est appeler une fonction avant que l'animation ne se produise. Dans cette fonction, nous masquons l'écran de connexion tout en rendant l'écran de registre visible. Ensuite, nous exécutons l'animation. Voici le javascript:

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

Ensuite, nous modifierons l'attribut Data-Anijs du lien de registre:

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

Voici une démo avec notre code nouvellement ajouté:

Voir le stylo zdjlc par SitePoint (@SitePoint) sur Codepen.

Maintenant que l'écran de registre peut être rendu visible, nous devons également connecter le lien de connexion dans l'écran de registre à l'écran de connexion d'origine, similaire à ce que nous venons de faire pour l'écran de registre. Voici la fonction:

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

Et voici l'attribut Data-Anijs modifié pour le lien de connexion:

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

et voici une démo avec le nouveau code:

Remarque de l'éditeur: les démos ci-dessous ne semblent pas fonctionner correctement à 100% dans ces intégres, en particulier lorsque vous essayez de basculer plusieurs fois entre «se connecter» et «enregistrer». Essayez le lien «Modifier» dans le cadre de codepen pour afficher la démo complète, où elle devrait fonctionner correctement.

Voir la démonstration des anijs, afficher la connexion et afficher le registre par SitePoint (@SitePoint) sur codepen.

similaire à ce que nous avons fait dans l'écran de connexion, nous validerons le formulaire de registre à l'aide d'une fonction:

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

normalement, nous mettrions en cache beaucoup de ces objets dans des variables, plutôt que de répéter les références. Nous le faisons de cette façon juste pour cet exemple simple.

Et enfin, modifions l'attribut Data-Anijs dans notre HTML pour inclure l'animation et l'appel de fonction.

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

Et voici notre démo finale:

Voir la démonstration de la démonstration des anijs par SitePoint (@SitePoint) sur Codepen.

Conclusion

Dans ce tutoriel, ce dont nous avons discuté n'est qu'un aperçu de cette bibliothèque impressionnante. Des informations détaillées sur son utilisation sont disponibles dans les documents ANIJS.

Des questions fréquemment posées (FAQ) sur les anijs

Qu'est-ce que ANIJS et comment cela fonctionne-t-il?

ANIJS est une bibliothèque de manipulation déclarative pour les animations CSS. Il permet aux développeurs de créer des animations à l'aide d'une syntaxe simple et intuitive, sans avoir à écrire du code JavaScript complexe. ANIJS fonctionne en analysant l'attribut Data-Anijs dans vos éléments HTML et en exécutant les animations correspondantes. Cela facilite la gestion et le contrôle des animations, car vous pouvez les définir directement dans votre HTML.

Comment installer ANIJS?

L'installation des ANIJ est simple. Vous pouvez le télécharger directement à partir du référentiel GitHub ou utiliser un gestionnaire de packages comme NPM ou Bower. Une fois téléchargé, vous devez simplement inclure le script ANIJS dans votre fichier HTML. Vous pouvez ensuite commencer à utiliser ANIJS en ajoutant l'attribut Data-Anijs à vos éléments HTML.

Puis-je utiliser des ANIJ avec d'autres bibliothèques JavaScript?

Oui, ANIJS est conçu pour être compatible avec d'autres javascript bibliothèques. Il n'interfère pas avec les fonctionnalités d'autres bibliothèques, et vous pouvez l'utiliser aux côtés de bibliothèques comme jQuery, React ou Angular. Cela fait des ANIJ un outil polyvalent pour créer des animations dans une variété de contextes de développement Web.

Comment créer des animations avec des anijs?

La création d'animations avec des ANIJ implique l'ajout de l'attribut Data-Anijs à votre Éléments HTML et définissant les paramètres d'animation. L'attribut Data-Anijs utilise une syntaxe simple qui spécifie l'événement, l'élément pour animer, l'animation à appliquer et la fonction de rappel. Vous pouvez également utiliser les fonctions ANIJS auxiliaires pour contrôler le flux d'animation.

Quels types d'animations puis-je créer avec ANIJS?

ANIJS prend en charge une large gamme d'animations CSS. Vous pouvez créer des animations simples comme les fonds et les diapositives, ainsi que des animations plus complexes impliquant des transformations et des transitions. ANIJS prend également en charge le chaînage d'animation, vous permettant de créer des séquences d'animations qui s'exécutent dans un ordre spécifique.

Puis-je utiliser des ANIJ pour une conception réactive?

Oui, les ANIJ peuvent être utilisés pour une conception réactive. Les animations créées avec ANIJS sont basées sur CSS, ce qui signifie qu'elles peuvent être mises à l'échelle et adaptées à différentes tailles d'écran et résolutions. Cela fait des ANIJ un outil utile pour créer des animations qui fonctionnent bien sur les appareils de bureau et mobiles.

Comment puis-je contrôler le moment des animations dans ANIJS?

ANIJS fournit plusieurs façons de contrôler le timing d'animations. Vous pouvez spécifier la durée de l'animation dans l'attribut Data-Anijs, et vous pouvez utiliser la fonction de retard pour suspendre l'animation pendant un certain temps. Vous pouvez également utiliser les fonctions ANIJS Helper pour contrôler le flux et le synchronisation d'animation.

Puis-je utiliser ANIJS pour animer les éléments SVG?

Oui, les ANIJ peuvent être utilisés pour animer les éléments SVG. Vous pouvez appliquer les mêmes paramètres d'animation et méthodes de contrôle aux éléments SVG que vous le feriez sur des éléments HTML réguliers. Cela vous permet de créer des animations complexes impliquant des graphiques et des formes SVG.

Comment déboguer les animations dans ANIJS?

Les animations de débogage dans les ANIJ impliquent la vérification de la syntaxe de l'attribut Data-Anijs et du CSS Propriétés d'animation. Si une animation ne fonctionne pas comme prévu, vous pouvez utiliser les outils de développeur du navigateur pour inspecter l'élément HTML et vérifier les propriétés CSS appliquées. Vous pouvez également vérifier la console JavaScript pour tous les messages d'erreur liés aux ANIJS.

Puis-je contribuer au développement des ANIJS?

Oui, ANIJS est un projet open-source et accueille les contributions de la communauté. Vous pouvez contribuer en signalant des bogues, en suggérant de nouvelles fonctionnalités, en améliorant la documentation ou en soumettant des demandes de traction avec des améliorations de code. Vous pouvez trouver plus d'informations sur la façon de contribuer sur la page ANIJS GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!