La meilleure bibliothèque d'animation JavaScript gratuite et open source

Lorsqu'elles sont utilisées correctement, les animations peuvent améliorer considérablement l'expérience utilisateur. Il existe de nombreux éléments sur une page Web qui peuvent être animés pour leur donner vie. Des éléments de base comme la couleur d'arrière-plan d'un bouton ou le rayon de bordure de certains éléments d'une page Web peuvent également être animés à l'aide de CSS.

Cependant, CSS a ses limites, et si vous souhaitez plus de contrôle sur chaque aspect de vos éléments animés, vous devrez utiliser JavaScript. Dans cet article, je vais vous montrer huit des meilleures bibliothèques d'animation JavaScript gratuites et open source que vous pouvez utiliser dès maintenant dans vos projets.

Mo.js

Mo.js est une excellente bibliothèque pour ajouter des graphiques animés basés sur JavaScript à votre site Web. C'est très rapide, produit des animations fluides et s'affiche parfaitement sur une variété d'appareils. Il est également modulaire, vous évitant ainsi des frais supplémentaires si vous souhaitez uniquement utiliser un composant spécifique.

La bibliothèque dispose d'une API déclarative pour définir les valeurs de différentes propriétés pour les composants que vous créez. Il est livré avec quatre modules intégrés différents appelés Html, Shape, ShapeSwirl et Burst. Les rafales et les tourbillons peuvent être utilisés de manière créative dans diverses interactions des utilisateurs avec les éléments de votre site Web.

Essayez de cliquer n'importe où dans le CodePen ci-dessus et vous verrez un joli groupe de cercles et d'étoiles. Il a été créé par LegoMushroom à l'aide des modules Burst et Shape de mo.js.

La documentation de

mo.js fournit de nombreux exemples intéressants comme celui-ci pour vous aider à comprendre divers aspects de la bibliothèque.

anime

Anime est l'une des bibliothèques d'animation les plus populaires sur GitHub. Il est très léger et est livré avec une API facile à apprendre. Cette bibliothèque peut être utilisée pour animer les propriétés CSS, SVG et DOM.

Cela vous donne beaucoup de contrôle sur la façon dont les éléments s'animent. Vous pouvez contrôler la vitesse, la direction et l'ordre dans lesquels les objets se déplacent. Chaque fois que vous choisissez de faire cela, vous pouvez choisir de mettre en pause, de redémarrer ou d'inverser l'animation.

La bibliothèque fournit également un bon support pour les animations SVG. Vous pouvez créer un effet de déformation fluide ou créer une animation de dessin au trait entre deux formes SVG différentes.

Essayez de cliquer sur le bouton Écrire le nom dans le CodePen ci-dessus et vous verrez les lettres de mon nom s'animer une à la fois. Cette démo fait partie d'une série de tutoriels sur l'anime. Vous pouvez les consulter pour en savoir plus sur la bibliothèque.

Actions populaires

Popmotion est une autre bibliothèque d'animation légère et populaire. Vous pouvez l'utiliser pour animer des nombres, des couleurs et des chaînes complexes. Les principales fonctions d'animation de la bibliothèque font environ 5 Ko et la bibliothèque entière fait environ 12 Ko.

Vous pouvez l'utiliser pour créer deux types d'animation : image clé et ressort. Vous pouvez fournir des points de début et de fin, etc. pour les animations d'images clés. Les animations Spring ont des propriétés telles que la rigidité, l'amortissement, la masse et la vitesse, donnant à vos animations un mouvement plus naturel. La bibliothèque est également livrée avec de nombreuses fonctions utilitaires pour les calculs tels que angle、clamp、distance、snapp etc.

L'animation d'images clés dans la démo CodePen de Gaougalos ci-dessus a été créée à l'aide de la bibliothèque Popmotion.

affichage défilant

La bibliothèque ScrollReveal est pratique lorsque vous souhaitez animer un élément lorsqu'il défile dans ou hors de la fenêtre.

Il existe de nombreuses options pour animer des éléments. Vous pouvez utiliser les propriétés de délai, de durée et d'intervalle pour contrôler la progression de l'animation. Il existe également des options pour contrôler la rotation, la mise à l'échelle et le mouvement des objets à afficher. La bibliothèque est également livrée avec des rappels qui peuvent être utilisés pour déterminer ce qui se passe avant ou après l'affichage d'un élément.

La démo CodePen ci-dessus de Sava Lazic utilise la bibliothèque ScrollReveal pour créer une chronologie verticale visuellement attrayante. Vous pouvez créer du contenu similaire à la présentation de produits ou de projets sur votre site Web.

vivant

Vivus est une étonnante bibliothèque d'animation basée sur JavaScript créée spécifiquement pour créer des animations SVG. Il est très léger et n'a aucune dépendance.

Vivus vous propose trois façons différentes d'animer des chemins en SVG. Vous pouvez animer toutes les lignes en même temps, avec un délai ou l'une après l'autre. Cela vous offre également une grande flexibilité lors du timing de vos animations.

Certaines choses dont vous devez vous rappeler lorsque vous utilisez Vivus sont qu'il anime toujours les éléments dans l'ordre défini dans le SVG. De plus, l'élément que vous souhaitez animer doit avoir un trait plutôt qu'un remplissage.

L'animation du chemin SVG dans la démo CodePen d'Alex Nelson ci-dessus a été créée avec seulement six lignes de code et l'aide de Vivus.

Typed.js

Vous pouvez deviner d'après le nom Typed.js que cette bibliothèque d'animation est utilisée pour saisir du texte. Vous pouvez transmettre toutes les chaînes que vous souhaitez saisir sous forme de tableau. La bibliothèque implémente également une manière plus conviviale pour le référencement de lire le texte que vous souhaitez animer en tapant à partir du code HTML div sur une page Web.

Vous pouvez affiner le comportement de l'animation de frappe à l'aide d'une série de paramètres. Cela inclut la vitesse de frappe, la vitesse de retour arrière, le délai de démarrage, le délai de retour arrière, le nombre de boucles, etc. Vous pouvez également définir un ensemble de fonctions de rappel qui se déclenchent sur différents événements (par exemple après avoir tapé une chaîne).

Le CodePen de Conner ci-dessus illustre comment nous pouvons utiliser cette bibliothèque pour rendre intéressantes les pages d'erreur 404 ennuyeuses.

ProgressBar.js

C'est une bonne idée d'ajouter une barre de progression à tout processus qui prend un certain temps. Cela permet à l'utilisateur de savoir à quelle vitesse la tâche progresse. Par exemple, vous pouvez afficher une barre de progression dans un éditeur d'images en ligne pour informer les utilisateurs que la page est non seulement bloquée, mais que l'image est en cours de traitement en arrière-plan.

La bibliothèque

ProgressBar.js permet aux développeurs d'ajouter très facilement des barres de progression élégantes à leurs sites Web. En plus de créer une barre de progression à l'aide de certaines formes intégrées, telles que des lignes, des cercles ou des demi-cercles, vous pouvez également choisir d'utiliser vos propres formes personnalisées. Cela ouvre une gamme de possibilités intéressantes.

Comme vous pouvez le voir dans la démo ci-dessus, nous pouvons animer diverses propriétés dans la barre de progression. Vous pouvez consulter ce didacticiel d'introduction ProgressBar.js pour en savoir plus sur la bibliothèque.

Lotti

Lotie pour Airbnb est une bibliothèque d'animation différente des autres dont nous avons parlé jusqu'à présent. Il analyse les animations créées avec Adobe After Effects qui ont été exportées vers JSON à l'aide de Bodymovin. Vous pouvez ensuite restituer ces effets directement sur la page Web.

La page GitHub de la bibliothèque explique en détail le processus d'installation et son fonctionnement. Il existe de nombreuses méthodes globales que vous pouvez utiliser pour contrôler la progression de l'animation. Vous pouvez facilement démarrer, arrêter et inverser la direction de l'animation.

Il vous suffit d'écrire quelques lignes de code pour charger le fichier JSON requis et initialiser l'animation avec certains paramètres. La démo CodePen de kittons ci-dessus est un excellent exemple de la façon de restituer facilement des animations After Effects dans le navigateur.

Pensées finales

Dans cet article, nous examinons huit bibliothèques d'animation JavaScript gratuites et open source populaires. Ils font chacun quelque chose de différent et ciblent différents aspects de l’animation Web. Avec ces bibliothèques, vous pourrez animer presque n'importe quel contenu de votre site Web. J'espère que vous utiliserez ces bibliothèques pour créer un beau site Web qui vous distinguera de la concurrence ! Assurez-vous simplement de ne pas abuser des animations.

Une chose à garder également à l’esprit est que vous devriez toujours essayer d’utiliser CSS pour des animations simples. Cela ne sert à rien de charger une bibliothèque d'animation JavaScript complète si vous souhaitez simplement changer la couleur d'un élément lorsque l'utilisateur le survole.

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!