9 des meilleures bibliothèques d'animation pour les concepteurs d'interface utilisateur –

Ceci est la dernière mise à jour de notre guide pour vous aider à choisir la bonne bibliothèque d'animation pour chaque tâche. Nous allons passer en revue neuf bibliothèques d'animations gratuites et bien codées, adaptées au travail de conception d'interface utilisateur – couvrant leurs forces et leurs faiblesses, et à quel moment choisir chacune d'entre elles. Animation avec le cours CSS par Donovan Hutchinson, l'homme derrière CSS Animation Rocks.

La conception Web frontale a connu une révolution au cours de la dernière décennie. Dans les dernières années, la plupart d'entre nous concevaient encore des mises en page statiques. De nos jours, nous construisons des "machines numériques" avec des milliers de pièces mobiles, redimensionnées et coordonnées.

En termes simples, les grands concepteurs d'interface utilisateur doivent aussi être d'excellents animateurs

Gardez à l’esprit que nous examinons chaque bibliothèque du point de vue d’un concepteur d’interface utilisateur qui maîtrise le code, et non en tant que développeur de code. Certaines de ces bibliothèques sont de simples CSS. D'autres sont JavaScript, mais aucun ne nécessite plus que la compréhension de base de HTML / CSS pour être utile. Lier la bibliothèque ajouter une classe CSS.

Notre liste des 9 meilleures bibliothèques d'animation

1. Animate.css
2. Bounce.js
3. AnimeJS
4. Animations magiques
5. DynCSS
6. CSShake
7. Hover.CSS [19659014] Velocity.js
8. AniJS

Animate.css est l'une des bibliothèques d'animation CSS les plus petites et les plus faciles à utiliser. Appliquer la bibliothèque Animate à votre projet est aussi simple que de lier le CSS et d'ajouter les classes CSS requises à vos éléments HTML. Vous pouvez également utiliser jQuery pour déclencher les animations sur un événement particulier si vous préférez.

Au moment de la rédaction du présent document, il s’agit toujours de l’une des bibliothèques d’animation CSS les plus populaires et les plus répandues. Il a étoiles sur GitHub et est souvent emballé en tant que composant dans de nombreux projets plus importants.

Animate.css est toujours en développement actif. C'est l'une des bibliothèques d'animation les plus simples et les plus robustes et nous n'hésiterons pas à l'utiliser dans n'importe quel projet.

Bounce.js est une bibliothèque d'animation JavaScript qui propose une sélection de jeux amusants et uniques. -esque "animations sur votre site Web.

Bounce.js est une bibliothèque d’animations soignée avec une dizaine de taille de la bibliothèque. Comme avec animate.css les animations sont fluides et sans faille. Vous voudrez peut-être envisager d'utiliser cette bibliothèque si vos besoins sont centrés sur des types d'animation de type "pop et bubble" et pourraient bénéficier d'une taille de fichier inférieure.

AnimeJS mais a gagné beaucoup de convertis depuis sa création. Il est incroyablement polyvalent et puissant et ne serait pas hors de propos pour des animations de jeux HTML. La seule vraie question est " est-il excessif pour les applications Web simples? "

Peut-être. Mais comme il est rapide, petit et relativement facile à apprendre, il est difficile de le trouver.

AnimeJS est décrit comme une bibliothèque d'animation JavaScript légère qui " fonctionne avec toutes les propriétés CSS, Transformations CSS individuelles, attributs SVG ou DOM et objets JavaScript ". C'est vraiment génial – tellement génial, en fait, que la capture GIF que j'ai prise ci-dessous ne puisse pas rendre justice à la douceur et à la finesse de la motion.

Ce projet est disponible sur GitHub .

Plus impressionnant, Anime.JS a une "documentation" époustouflante illustrant le code HTML, le code JavaScript et des exemples de travail dans un bel environnement d'application.

Si vous êtes à l'aise avec une solution d'animation JavaScript, il est difficile de trouver des raisons d'ignorer Anime.JS.

Magic Animations est l'une des bibliothèques d'animation les plus impressionnantes. Il possède de nombreuses animations différentes, dont beaucoup sont uniques à cette bibliothèque. Comme avec Animate.css, vous pouvez implémenter Magic en important simplement le fichier CSS. Vous pouvez également utiliser les animations de jQuery. Ce projet propose une application de démonstration particulièrement cool.

La taille du fichier de Magic Animation est modérée par rapport à animate.css et il est connu pour sa des animations de signature, telles que les effets magiques, les effets idiots et les effets de bombes.

Si vous recherchez quelque chose d'un peu inhabituel, je vous recommande vivement de donner une chance à cette bibliothèque d'animation dans votre prochain projet. Vous ne serez pas déçu.

DynCSS est une bibliothèque d'animation que vous aimeriez utiliser sur votre site Web avec des effets de parallaxe. Pour avoir une idée plus précise de ce que vous pouvez faire avec cette bibliothèque, jetez un oeil à cette démo .

DynCSS est une bibliothèque simple sans grande popularité, comme en témoigne le nombre d'étoiles sur GitHub. Mais ça vaut toujours la peine de regarder. Une des fonctionnalités intéressantes de cette bibliothèque est la rotation des éléments par rapport au défilement, ce que Vittorio montre magnifiquement sur la page d'accueil de DynCSS (ce qui en fait un cas parfait pour les pages liées à la parallaxe).

CSShake offre exactement ce qu'il dit sur la boîte – une bibliothèque CSS conçue spécialement pour secouer des éléments de votre page Web. Comme vous vous en doutez, il existe un certain nombre de variantes disponibles pour secouer vos composants Web.

Apple a popularisé l'interface utilisateur en secouant vigoureusement un élément de l'interface utilisateur (boîte de dialogue, modal ou zone de texte) lorsqu'un utilisateur entre une réponse incorrecte – imitant une personne en train de secouer la tête. CSShake fournit une gamme intéressante d'animations "shake" et il n'y a pas de manque de variation dans cette bibliothèque.

Bien que la bibliothèque soit actuellement plus populaire que DynCSS, je pense que la taille des fichiers peut ne pas être justifiée. Bien que les animations soient intelligentes, je ne peux pas penser à un grand nombre de cas d'utilisation où vous n'auriez pas encore besoin d'inclure une seconde bibliothèque d'animation pour les effets non tremblants. Mais peut-être que je manque simplement d'imagination?

Hover.css est une bibliothèque d'animation CSS conçue pour être utilisée avec des boutons et d'autres éléments d'interface utilisateur de votre site Web. Il a de très belles transitions en 2D, ainsi qu'une foule d'autres animations bien conçues.

• Version actuelle :
• Popularité :
• Description : "Appliquez facilement à vos propres éléments, modifiez ou utilisez simplement pour l'inspiration."
• Taille de la bibliothèque : 104,2 Ko
• GitHub : https://github.com / IanLunn / Hover
• Licence :

Hover.css est le mieux adapté pour animer des éléments de page discrets tels que des boutons, des logos, des composants SVG ou des images en vedette plutôt que des animations de pages complexes plus grandes. Il a une liste complète de routines et cela explique sa taille relativement grande (cependant, je pense toujours que la taille peut être beaucoup plus optimisée). On peut dire que ses effets d'animation les plus remarquables sont ses bulles et ses boucles distinctives.

Velocity.js est une autre suite d'animation JavaScript sophistiquée et complète comprenant des fonctions telles que Fade & Slide, Scroll, Stop, Finish et bien d'autres. 19659004] Il possède une liste impressionnante d'utilisateurs connus, tels que Tumblr, WhatsApp, MailChimp, Scribd, Gap et HTC. Vous savez donc qu'il a été testé contre des bases d'utilisateurs volumineuses et des cas étranges.

Velocity n'est peut-être pas adapté à certains, car il s'agit d'un moteur d'animation JavaScript et d'un moteur d'animation utilisant la même API que $. Animate () . Cela fonctionne à la fois avec et sans la présence de jQuery. Cela dit, il est incroyablement rapide et ses fonctionnalités incluent l'animation couleur, les transformations, les boucles et l'assouplissement. Essentiellement, c'est le meilleur des transitions jQuery et CSS combinées.

Notre bibliothèque finale est intéressante pour son approche unique. AniJS est une bibliothèque d'animation qui vous permet d'ajouter des animations à des éléments dans une structure simple de type phrase. Prenez le format suivant:

Si cliquez sur, Sur Carré, Faire osciller animé Pour .container-box

Si vous n'avez pas une longue connaissance de JavaScript, cela pourrait bien être un excellent moyen d'entrer dans des mouvements chorégraphiés par JS.

• Créateurs : anijs
• Publication : 2014
• Version actuelle :
• Popularité :
• Description : "Une bibliothèque pour développer votre conception Web sans codage . "
• Taille de la bibliothèque : 10,5 ko
• GitHub : https://github.com/anijs/anijs
• Licence :

AniJS est une bibliothèque de taille très raisonnable compte tenu de ses fonctionnalités. Le format qu'il utilise pour l'implémentation est assez original et différent de celui des autres bibliothèques d'animation (que beaucoup d'autres pourraient trouver non conventionnelles).

Néanmoins, cette bibliothèque vaut la peine d'essayer au moins une fois pour vos projets.

Quelle bibliothèque choisiriez-vous?

Il existe de nombreuses bibliothèques d’animation prêtes à être implémentées dans votre projet. Ceux énumérés ci-dessus sont quelques-uns avec la meilleure combinaison de sophistication et de stabilité.

Si vous recherchez une solution CSS simple d'utilisation et robuste, Animate.CSS est probablement l'option la plus polyvalente et la plus fiable du marché.

Vous cherchez une option JavaScript plus complète et plus puissante, VelocityJS et Anime.JS sont très difficiles à diviser. Velocity a actuellement les antécédents et une plus grande base d'installation, mais Anime.JS est incroyablement poli et passionnant. À l'heure actuelle, la belle documentation d'Anime.JS pourrait suffire à nous convaincre.

Bien que l'utilisation d'une bibliothèque d'animation dans votre application Web puisse certainement améliorer l'interactivité, son utilisation irait à l'encontre de l'objectif et confondrait souvent l'utilisateur. Soyez prudent et utilisez-les judicieusement.

Utilisez-vous des bibliothèques d'animation pour vos projets? Quelles sont vos bibliothèques d'animation préférées?

Amenez vos animations CSS au niveau supérieur avec notre cours Animation avec CSS par Donovan Hutchinson, l'homme derrière CSS Animation Rocks.

Alex gère la conception et le développement frontal pour sitepoint. com et est l'éditeur de Design et UX de SitePoint.

Tanay Pant est un auteur, hacker, développeur et passionné de technologie indienne. Il est connu pour son travail sur Learning Application Development de Firefox OS publié par Packt . Il est également représentant officiel de Mozilla, et a été répertorié dans le à propos de: credits du navigateur Web Firefox. Son site Web personnel est tanaypant.com .