Débuter avec Anime.js –

Il existe de nombreuses bibliothèques d'animation JavaScript, mais Anime.js est l'un des meilleurs. Il est facile à utiliser, possède une API petite et simple et offre tout ce que vous pouvez souhaiter d’un moteur d’animation moderne. La bibliothèque a une petite taille de fichier et supporte tous les navigateurs modernes, y compris IE / Edge 11+.

La seule chose qui pourrait vous empêcher d’utiliser Anime.js tout de suite, c’est sa documentation minimale, de type zen. J'aime l'approche compacte, structurée et élégante qu'il faut adopter, mais je pense qu'une explication plus détaillée serait utile. Je vais essayer de résoudre ce problème dans ce didacticiel.

Bien démarrer avec Anime.js

Pour commencer, téléchargez le fichier anime.js dans votre page HTML:

Vous pouvez également utiliser la dernière version de la bibliothèque hébergée sur un CDN:

Pour créer une animation, nous utilisons la fonction anime () qui prend un objet comme argument. Dans cet objet, nous décrivons tous les détails de l'animation.

 let myAnimation = anime ({
  / * Décrit les détails de l'animation * /
});

Il existe plusieurs types de propriétés utilisées pour décrire l'animation. Ils sont regroupés en quatre catégories distinctes:

• Cibles – cela inclut une référence au (x) élément (s) que nous souhaitons animer. Ce pourrait être un sélecteur CSS ( div #square .rectangle ), un nœud DOM ou une liste de nœuds, ou un objet JavaScript simple. Il existe également une option permettant d'utiliser un mélange des éléments ci-dessus dans un tableau.
• Propriétés – cela inclut toutes les propriétés et tous les attributs pouvant être animés lors de l'utilisation de CSS, d'objets JavaScript, DOM et SVG.
• Paramètres de propriété – Ceci inclut les paramètres liés à la propriété tels que durée délai atténuation etc.
• Paramètres d'animation – cela inclut des paramètres liés à l'animation tels que direction boucle etc.

Voyons maintenant comment cela s'applique dans la pratique. Prenons l'exemple suivant:

 let animation = anime ({
  cibles: 'div',
  // Propriétés
  translateX: 100,
  borderRadius: 50,
  // Paramètres de propriété
  durée: 2000,
  assouplissement: 'linéaire',
  // Paramètres d'animation
  direction: 'alternatif'
});

Voir le stylo
AnimeJS: Exemple de base de SitePoint ( @SitePoint )
sur CodePen .

Note: I ' m ne va pas couvrir les sections HTML et CSS du code dans le tutoriel. Celles-ci ont tendance à être faciles à comprendre sans explication supplémentaire. Vous pouvez trouver et explorer le code HTML et CSS dans les stylos intégrés qui suivent chaque exemple.

Dans l'exemple ci-dessus:

1. Nous sélectionnons le carré vert (le style div ).
2. Nous déplacez-le de 100 pixels vers la gauche tout en le transformant en cercle.
3. Nous réglons tout cela en douceur en deux secondes ( linear signifie qu'aucun ralentissement ne sera appliqué à l'animation).
4. En définissant la propriété direction sur alter nous demandons à l'élément div de revenir à sa position et à sa forme initiales après l'achèvement de l'animation. Anime.js le fait en jouant l'animation dans l'ordre inverse.

Vous remarquerez peut-être que je n'utilise aucune unité lors de la spécification des valeurs de propriété. C’est parce que si la valeur originale a une unité, elle est automatiquement ajoutée à la valeur animée. Nous pouvons donc omettre les unités en toute sécurité. Mais si nous voulons utiliser une unité spécifique, nous devons l’ajouter intentionnellement.

Créez quelque chose de plus significatif.

Création d’une animation avec pendule

Dans cet exemple, nous allons créer une animation avec pendule. Après avoir «dessiné» un pendule en utilisant nos compétences HTML et CSS, il est temps de le concrétiser:

 let animation = anime ({
  cibles: '#rod',
  rotation: [60, -60]// de 60 à -60 degrés
  durée: 3000,
  assouplissement: 'easInOutSine',
  direction: 'alterner',
  boucle: true
});

Voir le stylo
AnimeJS: Animation de pendules de SitePoint ( @SitePoint )
sur CodePen .

Dans cette animation, nous utilisons le le type de valeur de-à qui définit une plage de mouvement pour l'animation. Dans notre cas, la tige du pendule est tournée de 60 à à 60 ° . Nous utilisons également easInOutSine atténuation pour simuler le mouvement naturel du pendule qui ralentit aux pointes et va plus vite au fond. Nous utilisons à nouveau l'option alternative pour déplacer le pendule dans les deux sens et définir le paramètre de la boucle sur true pour répéter le mouvement à l'infini.

Bien réussi. Passons à l’exemple suivant.

Création d’une animation de charge de la batterie

Dans cet exemple, nous souhaitons créer une icône animée d’une batterie en cours de chargement, semblable aux icônes de nos smartphones. Ceci est facilement faisable avec un peu de HTML et CSS. Voici le code de l'animation:

 let animation = anime ({
  cibles: '.segment',
  largeur: 20
  durée: 300
  delay: fonction (el, i, l) {
    retourne i * 500;
  },
  endDelay: 500,
  assouplissement: 'linéaire',
  boucle: true
});

Voir le stylo
AnimeJS: Animation de batterie de chargement de SitePoint ( @SitePoint )
sur CodePen .

Nous avons ici trois segments ( les éléments verts div ) qui s'agrandissent (en augmentant la propriété width ) les uns après les autres. Pour obtenir cet effet, nous devons utiliser des délais différents pour chacun. Un seul paramètre de délai pouvant être utilisé pour une animation est utilisé. Dans ce cas, nous allons utiliser un paramètre basé sur la fonction qui produit une valeur différente pour chaque cible.

Pour ce faire, nous fournissons une fonction à trois arguments au lieu d'une valeur littérale ( target index et targetLength ). Dans notre cas, la fonction retourne l'index multiplié par 500 millisecondes, ce qui provoque l'animation de chaque élément une demi-seconde après le précédent.

Nous utilisons également le paramètre endDelay pour faire une pause pendant un moment avant le début de l'animation.

Amélioration de l’animation de charge de la batterie

Désormais, l’animation semble bonne, mais améliorons-la un peu en ajoutant une étiquette de progression indiquant le pourcentage de charge. Voici le code:

 let progress = document.querySelector ('# progress');

laisser la batterie = {
  progrès: '0%'
}

let icon = anime ({
  cibles: '.segment',
  largeur: 20
  durée: 300
  délai: anime.stagger (500),
  endDelay: 500,
  assouplissement: 'linéaire',
  boucle: true
});

let label = anime ({
  cibles: batterie,
  progrès: '100%',
  durée: 30000,
  assouplissement: 'linéaire',
  tour 1,
  mise à jour: function () {
    progress.innerHTML = batterie.progress
  },
  complete: function () {
    icon.pause ();
    icon.seek (icon.duration);
  }
});

Voir le stylo
AnimeJS: animation améliorée de la batterie de chargement de SitePoint ( @SitePoint )
sur CodePen .

Cet exemple en présente plusieurs autres. caractéristiques de la bibliothèque. Nous allons les explorer un par un.

Premièrement, nous créons une variable progress qui fait référence à l’étiquette dans le code HTML. Ensuite, nous créons l'objet battery contenant la propriété progress . Ensuite, nous créons deux animations.

La première animation est presque identique à l'exemple précédent, à l'exception du paramètre delay . Nous allons utiliser ici la fonctionnalité Anime.js qui nous permet d’animer plusieurs éléments à la fois. Nous utilisons la fonction anime.stagger () pour cela. Dans notre cas, anime.stagger (500) fonctionne exactement comme le paramètre basé sur la fonction: il ajoute un délai de 50 millisecondes avant chaque animation d'élément.

Dans la deuxième animation, nous utilisons le . ] objet batterie comme cible. Ensuite, nous définissons la propriété progress à animer à 100%. Le paramètre round arrondit la valeur animée à la décimale donnée. En lui attribuant la valeur 1, nous obtenons des nombres entiers.

Nous utilisons ensuite deux des rappels proposés par Anime.js.

Pour lier la valeur d'étiquette de progression de HTML à la valeur de progression de la batterie nous utilisons le rappel update () [1945[19009009]. Nous utilisons également le rappel complete () pour arrêter l'animation une fois l'avancement égal à 100%, et nous utilisons la méthode seek () pour lui donner l'état terminé.

En conséquence, l’animation de charge sera lue jusqu’à ce que la progression atteigne 100%, puis elle s’arrêtera et forcera les segments à leur état final d’animation. L'icône apparaîtra comme étant complètement chargée.

Création d'animations plus complexes avec des images clés

Jusqu'à présent, nous avons traité les animations en une étape qui déplacent un objet de A à B. Mais pourquoi ne pas le déplacer de A à B? B to C to D?

Dans l'exemple suivant, nous verrons comment utiliser les images clés de propriétés pour créer des animations en plusieurs étapes. Nous allons déplacer un simple carré autour d'un autre qui sert de boîte.

 let box = document.querySelector ('# box');

let animation = anime ({
  cibles: '#content',
  traduction: [
    {value: 50, duration: 500},
    {value: 0, duration: 500, delay: 1500},  
    {value: -53, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 2500},
    {value: 50, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 1500}  
  ],
  translateX: [
    {value: 53, duration: 500, delay: 1000},
    {value: 0, duration: 500, delay: 2500},
    {value: -53, duration: 500, delay: 500},
    {value: 0, duration: 500, delay: 2500} 
  ],
  assouplissement: 'linéaire',
  commencer: function () {
    box.style.borderBottom = "none";
  },
  complete: function () {
    box.style.borderBottom = "solid darkorange 3px";
  }
});

Voir le stylo
AnimeJS: Animation de boîtes avec images clés de SitePoint ( @SitePoint )
sur CodePen .

Premièrement, nous créons un référence à l'élément box. Nous l'utilisons dans les rappels begin () et complete () pour "ouvrir" la boîte au début de l'animation et la "fermer" à la fin de l'animation. Voyons comment nous déplaçons l’autre carré - le contenu.

Pour chaque propriété que nous souhaitons animer, nous utilisons un tableau d'objets dans lequel chaque objet décrit une image clé particulière.

Dans notre cas, nous voulons déplacer le carré verticalement et horizontalement. Nous utilisons donc les propriétés translateY et translateX et nous fournissons un tableau d’images clés pour chacune d’elles. L'astuce pour créer un mouvement correct consiste à calculer correctement les paramètres de durée et de retard - ce qui peut s'avérer délicat!

Les images sont exécutées de haut en bas et démarrent simultanément pour chaque propriété qui a un tableau spécifié d’images-clés. Une fois démarré, le déroulement de la course dépend entièrement de la manière dont les paramètres de durée et sont définis. Bonne chance pour le calcul!

Le résultat de notre animation est que le carré sort de la boîte, effectue une orbite complète autour de lui, puis retourne à l'intérieur.

Création d'effets de texte

Nous avons vu un exemple. d'étonnant ci-dessus, et maintenant nous allons explorer une utilisation plus avancée. Nous allons utiliser l’effet de décalage pour créer un effet de texte sympa.

 let animation = anime ({
  cibles: '.letter',
  opacité: 1,
  traduction: 50,
  faire pivoter: {
    valeur: 360,
    durée: 2000,
    assouplissement: 'easInExpo'
  },
  scale: anime.stagger ([0.7, 1]{from: 'center'}),
  delay: anime.stagger (100, {start: 1000}),
  translateX: [-10, 30]
});

Voir le stylo
AnimeJS: Animation avec effet de texte de SitePoint ( @SitePoint )
le CodePen .

Nous avons mis chaque lettre dans un élément span . Dans le code d'animation, nous sélectionnons toutes les lettres, les rendons visibles et les déplaçons de 50 pixels vers le bas.

Ensuite, nous faisons pivoter les lettres en utilisant un paramètre de propriété spécifique qui définit des paramètres spécifiques pour une propriété donnée. . Cela nous donne un contrôle plus détaillé sur l'animation. Ici, les lettres seront pivotées de 360 ​​degrés en deux secondes en appliquant un assouplissement easInExpo .

Dans les deux propriétés suivantes, nous utilisons la fonction stagger () . Nous configurons l’échelle de manière à ce qu’elle soit distribuée uniformément de 0,7 à 1 opacité (en utilisant le type de valeur de plage), en partant du centre (en utilisant l’option de position de départ). Cela rend les lettres plus petites au milieu de la phrase et plus grandes aux deux extrémités.

Nous définissons l'animation de manière à attendre une seconde avant de commencer (en définissant une valeur de départ), puis un délai de 100 millisecondes est ajouté relativement pour chaque lettre.

Nous avons intentionnellement ajouté la propriété translateX à la fin pour créer l'effet souhaité, qui consiste à faire pivoter les lettres dans un mouvement en spirale.

Création d'animations avec chronologie

Une chronologie vous permet de manipuler plusieurs animations ensemble. Voyons un exemple simple:

 let animation = anime.timeline ({
  durée: 1000,
  assouplissement: 'easInOutSine',
  direction: 'alterner',
  boucle: true
});

animation.add ({
  cibles: '.one',
  traduction: -50,
  backgroundColor: 'rgb (255, 0, 0)'
}).ajouter({
  cibles: '. deux',
  traduction: -50,
  backgroundColor: 'rgb (0, 255, 0)'
}).ajouter({
  cibles: '.trois',
  traduction: -50,
  backgroundColor: 'rgb (0, 0, 255)'
});

Voir le stylo
AnimeJS: Animation de la chronologie de la balle Spinner de SitePoint ( @SitePoint )
sur CodePen .

Dans cet exemple, nous créer une boule à spinner.

Pour créer une chronologie, nous utilisons la fonction anime.timeline () . Ensuite, nous définissons des paramètres communs hérités pour toutes les animations ajoutées.

Pour ajouter une animation à la timeline, nous utilisons la méthode add () puis nous décrivons l’animation de la même manière que nous avons déjà couverte.

Dans notre exemple, nous ajoutons trois animations, une pour chaque balle. Le résultat est que chaque balle monte et tombe une à une.

Le problème est que dans cette forme de base, l'animation semble très statique. Changeons cela.

Par défaut, chaque animation commence après l’animation précédente. Mais nous pouvons contrôler ce comportement en utilisant des décalages horaires. De plus, si nous voulons rendre l’animation plus flexible et complexe, nous devons utiliser des images clés d’animation. Voyons comment cela s’applique dans l’exemple suivant:

 let animation = anime.timeline ({
  durée: 1000,
  assouplissement: 'easInOutSine',
  boucle: true
});

animation.add ({
  cibles: '.one',
  images clés: [
    {translateY: -50, backgroundColor: 'rgb(255, 0, 0)' },
    {translateY: 0, backgroundColor: 'rgb(128, 128, 128)'}
  ]
}).ajouter({
  cibles: '. deux',
  images clés: [
    {translateY: -50, backgroundColor: 'rgb(0, 255, 0)' },
    {translateY: 0, backgroundColor: 'rgb(128, 128, 128)'}
  ]
}, '- = 900'). Add ({
  cibles: '.trois',
  images clés: [
    {translateY: -50, backgroundColor: 'rgb(0, 0, 255)' },
    {translateY: 0, backgroundColor: 'rgb(128, 128, 128)'}
  ]
}, '- = 800');

Voir le stylo
AnimeJS: Animation de chronologie de fileuse de billes améliorée par SitePoint ( @SitePoint )
sur CodePen .

ici, nous supprimons le paramètre direction car nous utilisons des images clés pour réaliser le mouvement de va-et-vient. Nous définissons les images clés d'animation en ajoutant un paramètre d'images clés . Comme pour les images clés de propriétés, chaque objet du tableau est une image clé.

Pour que les billes bougent sans à-coups, nous utilisons des décalages horaires spécifiés comme deuxième paramètre de la fonction add () . Dans notre cas, nous utilisons des valeurs relatives à l'animation précédente.

Le résultat est une animation fluide de la balle.

Conclusion

J'espère que vous avez acquis une bien meilleure compréhension de Anime.js. Pour continuer votre apprentissage avec ces connaissances fondamentales en main, je vous recommande de consulter la documentation .

Anime.js est un moteur d'animation simple mais puissant qui peut être utilisé pour créer une large gamme d'animations. Laissez libre cours à votre imagination.

Ivaylo Gerchev est un développeur / concepteur Web autodidacte. Il adore jouer avec les langages HTML, CSS, jQuery, PHP et WordPress, ainsi que Photoshop et Illustrator. La devise d'Ivaylo est "Effort minimum pour un effet maximum!"