Animations basées sur JavaScript utilisant Anime.js, partie 1: cibles et propriétés

anime.js, une bibliothèque d'animation basée sur JavaScript légère qui peut être utilisée pour l'animation de production d'attributs CSS, SVG ou DOM sur les pages Web. Cette bibliothèque vous permet de contrôler les aspects d'une animation et fournit plusieurs façons de spécifier l'élément cible ou les propriétés à animer.

Vous avez un contrôle total sur l'ordre dans lequel les animations sont jouées et comment les différents éléments sont synchronisés. Cette bibliothèque prend en charge tous les navigateurs modernes.

Cette série de tutoriels vous guidera à travers toutes les fonctionnalités d'Anime.js afin que vous puissiez facilement les appliquer à des projets réels.

Avant de plonger dans le sujet, installons d'abord la bibliothèque. Vous pouvez installer à l'aide de NPM ou Bower en exécutant la commande suivante:

npm install animejs
bower install animejs

Vous pouvez également télécharger la bibliothèque et l'inclure dans votre projet, ou lier directement vers la dernière version de la bibliothèque hébergée sur le CDN.

Une fois l'installation réussie, vous pouvez utiliser cette bibliothèque pour ajouter des animations intéressantes aux éléments. Nous allons commencer par les bases de la bibliothèque et nous concentrer sur un domaine spécifique à la fois.

Spécifiez l'élément cible

Pour créer une animation à l'aide d'Anime.js, vous devez appeler Nodelist.

Vous pouvez également utiliser les nœuds DOM ou NodeList comme valeur de la balise de span. Jusqu'à présent, nous l'avons fait en créant manuellement un emballage en HTML. Maintenant, nous apprendrons à obtenir JavaScript pour traiter les balises. Voici notre élément de titre:

<h1 id="Have-a-Great-Day-Ahead">Have a Great Day Ahead</h1>

Il y a cinq mots distincts dans le titre, et nous enroulons chaque mot dans sa propre étiquette Span. Attribuez ensuite le résultat final à la balise SPAN, qui devrait être nul. Il s'agit du CSS que nous utilisons pour styliser le titre et pour utiliser H1 Span comme sélecteur. La valeur finale de l'attribut Translatey. Nous utilisons également les retards entrelacés dans l'initialisation de l'animation. Vous en apprendrez plus sur l'entrelacement dans anime.js dans le prochain tutoriel de cette série.

Il s'agit d'une démonstration de codepen montrant l'animation de salutation que nous venons de créer. Cliquez sur le bouton Saluez-moi pour redémarrer l'animation.

Résumé

Dans ce tutoriel, vous avez appris toutes les façons de sélectionner les éléments cibles dans anime.js et comment animer différents attributs et attributs CSS liés aux éléments cibles. Cependant, à ce stade, nous n'avons aucun contrôle sur quoi que ce soit lié à l'animation réelle.

Dans le prochain tutoriel de cette série, vous apprendrez à contrôler l'assouplissement, le retard et la durée des animations pour différents attributs (en tant que groupes et contrôle individuellement). Vous apprendrez ensuite à contrôler tous ces paramètres d'animation pour chaque élément.

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!