Comment créer une animation de piste de particules en JavaScript

Avez-vous déjà pensé à distraire les visiteurs de votre site Web avec une animation de particules fantaisie et scintillante pendant quelques instants, alors que certaines données sont chargées en arrière-plan? Heureusement, il n'est pas nécessaire d'aller très loin dans la programmation graphique avec des bibliothèques 3D comme three.js. Tout ce dont vous avez besoin à la place est une connaissance de base de CSS et JavaScript et d'une bibliothèque d'animation légère telle que anime.js. En fin de compte, nous devrions avoir le résultat suivant :

Téléchargement et intégration de Anime.js

Vous pouvez télécharger la bibliothèque anime.js à partir de la site officiel de GitHub . Téléchargez le fichier anime.js ou anime.min.js à partir du dossier lib / .

Dans mon exemple, la partie HTML ressemble à ceci:

Le fichier CSS styles.css définit la couleur d'arrière-plan de la page et des particules individuelles. Les réglages de position sont nécessaires pour que nous puissions ensuite positionner librement les particules sur la page en utilisant les propriétés CSS left et top .

 body {
 couleur de fond: hsl (30, 3%, 14%);
}
.anime-container {
  position: relative;
}
 
.anime-container .dot {
  position: absolue;
  / * dessine des particules sous forme de cercles: * /
  rayon-frontière: 50%;
  couleur de fond: hsl (60, 100%, 80%);
} 

Le contenu du fichier script.js est traité dans la section suivante.

Génération des particules

Comme son nom l'indique, une animation de particules se compose de nombreuses petites particules se déplaçant dans l'espace tout en suivant un certain schéma. Toutes les particules sont générées simultanément avant le début de l'animation.

Pour l'explication suivante, la documentation officielle de anime.js sera utile.

Dans mon exemple, les particules sont situés sur une spirale archimédienne. La position x et y d'une particule sur l'écran (alias gauche et haut en CSS) est calculée à partir de sa position ] angle sur la spirale:

 x = a * angle * cos (angle)
y = a * angle * sin⁡ (angle)

Le nombre d'angles et donc la longueur de la spirale est déterminé par le paramètre l . Avec le paramètre a vous pouvez contrôler la densité de la spirale.

 var container = document.querySelector (". Anime-container");
var n = 15;
var a = 20;
var l = 110;
for (var i = 0; i 

De cette façon, nous obtenons une spirale avec exactement une particule par position, mais un véritable effet de traînée ne peut être atteint si plus d'une particule est générée à chaque position. Pour que la piste ait l'air touffue, les positions des particules individuelles doivent être légèrement différentes. La bibliothèque d'animés fournit une fonction d'aide pratique pour cela:

 anime.random ( minValue, maxValue);

La taille des particules varie également de façon aléatoire:

Ici vous pouvez jouer avec le résultat intermédiaire:

Avant le début de l'animation, toutes les particules doivent être invisibles. J'ajouterai donc:

 dot.style.opacity = "0"; 

Animation des particules

Paramètres de base de l'animation

Les paramètres de base de mon animation se composent comme suit: [19659036] L'animation doit être répétée en continu (boucle: true),

 anime ({
  boucle: vrai,
  assouplissement: "linéaire",
  cibles: document.querySelectorAll (". dot"),
}); 

Dans l'étape suivante, j'animerai diverses propriétés CSS de mes cibles. Les étapes de base pour l'animation CSS peuvent être trouvées dans le chapitre propriétés de la documentation anime.js.

Animation Of Opacity

Voici à quoi ressemble notre première animation de propriété, dans laquelle toutes les particules sont lentement rendu visible dans les 50 ms:

 anime ({
  boucle: vrai,
  assouplissement: "linéaire",
  cibles: document.querySelectorAll (". dot"),
  opacité: {valeur: 1, durée: 50}
}); 

Et maintenant je vais enfin révéler l'astuce qui crée un mouvement en spirale des particules! L'idée est de rendre les particules visibles avec un certain retard (par exemple dans un intervalle de 2 ms). Les particules au milieu de la spirale sont rendues visibles dans un premier temps, suivies de toutes les autres particules de l'intérieur vers l'extérieur. La fonction de décalage d'anime.js est parfaitement adaptée à cela. À mon avis, le décalage est l'une des plus grandes forces de la bibliothèque qui vous permet d'obtenir de superbes effets.

 opacité: {valeur: 1, durée: 50, délai: anime.stagger (2)}

Pour créer l'illusion d'une piste volante, les particules doivent commencer à disparaître lentement dès qu'elles sont apparues . Heureusement, anime.js fournit une notation d'images clés pour les propriétés :

 opacité: [
    { value: 1, duration: 50, delay: anime.stagger(2) },
    { value: 0, duration: 1200}
  ],

Ici vous pouvez voir le résultat intermédiaire:

Animation Of Size

Ma trace de comète devrait apparaître plus grande à l'avant qu'à l'arrière. Dans ce but, j'ai laissé les particules se rétrécir en 500 ms pour un diamètre de 2 pixels. Il est important de choisir le même délai que pour l'animation d'opacité, afin que chaque particule ne commence à rétrécir qu'après son apparition:

 largeur: {valeur: 2, durée: 500, délai: anime.stagger (2) },
hauteur: {valeur: 2, durée: 500, délai: anime.stagger (2)}, 

Mouvement individuel des particules

La caractéristique typique d'une animation de particules est le comportement individuel et imprévisible des particules. J'anime enfin les particules avec un mouvement individuel dans le sens x et y :

 translateX: {
    valeur: fonction () {
      retourner anime.random (-30, 30);
    },
    durée: 1500,
    délai: anime.stagger (2)
  },

translateY: {
    valeur: fonction () {
      retourner anime.random (-30, 30);
    },
    durée: 1500,
    délai: anime.stagger (2)
  } 

Encore une fois, il est important que le mouvement commence avec le même délai que l'apparition des particules.

De plus, il est absolument nécessaire dans ce cas d'avoir des fonctions calculant les valeurs pour translateX et translateY . Ici, nous utilisons les paramètres comme paramètres basés sur la fonction dont les valeurs sont déterminées pour chaque cible individuellement . Sinon, toutes les cibles seraient décalées du même montant (quoique déterminé au hasard).

Réflexions finales

Vous pouvez voir le résultat final ici:

Vous pouvez modifier l'animation à votre goût en modifiant simplement toutes les valeurs. J'ai un petit conseil pour les touches finales: Maintenant que nous connaissons les paramètres basés sur les fonctions, l'animation d'opacité peut être un peu améliorée:

 opacité: [
    { value: 1, duration: 50, delay: anime.stagger(2) },
    { value: 0, duration: function(){return anime.random(500,1500);}}
]

La durée avant la disparition d'une particule est maintenant fixé pour chaque particule individuellement. Cela rend notre animation visuellement encore plus sophistiquée.

J'espère que vous êtes maintenant aussi excité que moi par les possibilités qu'offre anime.js pour les animations de particules! Je recommande une visite à CodePen où vous pouvez voir de nombreux autres exemples impressionnants.

Lectures complémentaires sur SmashingMag:

(ra, yk, il)