Jouer avec des particules à l'aide de l'API des animations Web

Utilisez l'API des animations Web pour créer des effets de particules cool: cliquez sur le bouton pour fleurir les feux d'artifice!

Rien ne peut mieux montrer le charme de l'animation que les effets de particules! Chaque fois que j'explore une nouvelle technologie, je ne peux pas m'empêcher d'utiliser autant de particules que possible pour faire une présentation. Cet article utilisera l'API des animations Web pour déclencher des effets sur les feux d'artifice en cliquant sur un bouton pour créer une magie de particules plus étonnante.

Support de navigateur

Au moment de la rédaction, tous les principaux navigateurs, à l'exception de Safari et Internet Explorer, prennent en charge l'API des animations Web au moins en partie. La prise en charge de Safari peut être activée dans le menu du développeur "Experience Fonctionnalités".

Le navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité à partir de cette version et plus tard.

Bureau

Mobile / tablette

Si vous souhaitez reproduire l'animation d'amour Twitter, vous pouvez également vous référer à ce merveilleux article d'Ana Tudor, qui est également un excellent exemple de l'effet d'une particule d'explosion de bouton.

Structure HTML

Cette démo ne nécessite pas beaucoup de code HTML. Nous en utiliserons un<button></button> Élément, mais peut également être d'autres types d'éléments de balise. Si nécessaire, nous pouvons même écouter tout événement de clic sur la page pour laisser les particules apparaître de n'importe où.

 <button id="button">Cliquez sur moi</button>

Style CSS

Étant donné que chaque particule possède certaines propriétés CSS communes, nous pouvons les définir dans le CSS global de la page. Vous pouvez créer des éléments de balise personnalisés comme dans HTML, j'utiliserai<particle></particle> Noms de balises pour éviter d'utiliser des balises sémantiques. Mais en fait, vous pouvez l'animation<div> ,<code><span></span> ou toute étiquette que vous choisissez.

 particule {
  Border-Radius: 50%;
  à gauche: 0;
  Pointer-Events: Aucun;
  Position: fixe;
  en haut: 0;
  Opacité: 0; / * La transparence initiale est 0, évitant les particules visibles avant le début de l'animation * /
}

Ce qui doit être noté est:

• Les particules ne doivent pas interagir avec la disposition de la page, nous définissons donc position sur fixed , top et left à 0px.
• Nous avons également supprimé pointer-events pour éviter toute interaction utilisateur avec les particules HTML lorsqu'ils apparaissent à l'écran.

Étant donné que la conception de style des mises en page des bouton et des pages n'est pas au centre de cet article, je sauterai cette section.

Code javascript

Voici six étapes que nous suivrons en JavaScript:

1. Écoutez l'événement de clic du bouton
2. Créer 30<particle></particle> et ajouter l'élément au dom
3. Réglez la largeur, la hauteur et la couleur du fond aléatoire pour chaque particule
4. Animer chaque particule pour qu'il passe de la position de la souris à la position aléatoire et s'estompe progressivement
5. Une fois l'animation terminée, supprimez-la du dom<particle></particle> élément

Étape 1: cliquez sur l'événement

 // Nous vérifions d'abord si le navigateur prend en charge l'API des animations Web
if (document.body.animate) {
  // Si pris en charge, nous ajoutons un clic de l'écouteur document.QuerySelector ('# bouton'). AddEventListener ('click', pop);
}

Étape 2: Création des particules

 // La fonction pop () est appelée fonction pop (e) {
  // Générez circulairement 30 particules pour (soit i = 0; i <h4 id="Étape-Largeur-hauteur-et-arrière-plan-des-particules"> Étape 3: Largeur, hauteur et arrière-plan des particules</h4><pre class="brush:php;toolbar:false"> Fonction CreateParticule (x, y) {
  // ... (code précédent)
  // Calculez la taille aléatoire entre 5px et 25px const size = math.floor (math.random () * 20 5);
  // Appliquez la taille à chaque particule.style.width = `$ {size} px`;
  partial.style.height = `$ {size} px`;
  // Générez des couleurs aléatoires dans la palette bleu / violet partiel.style.background = `hsl ($ {math.random () * 90 180}, 70%, 60%)`;
  // ... (étapes suivantes)
}

Étape 4: animer chaque particule

 Fonction CreateParticule (x, y) {
  // ... (code précédent)
  // générer des positions cibles aléatoires x et y dans la plage de la position de la souris 75px const Destinationx = x (math.random () - 0,5) * 2 * 75;
  const de destinationy = y (math.random () - 0,5) * 2 * 75;

  // Stockez l'animation dans une variable car nous en aurons besoin ultérieurement Animation de const = particule.animate ([
    {
      // Définit la position initiale de la particule // Nous utilisons la moitié de la taille de la particule pour déplacer la particule afin qu'elle soit centrée sur la souris: `traduire ($ {x - (taille / 2)} px, $ {y - (taille / 2)} px)`,
      Opacité: 1
    },
    {
      // Nous définissons la coordonnée finale comme la deuxième transformée de l'image clé: `traduire ($ {Destinationx} px, $ {Destinationy} px)`,
      Opacité: 0
    }
  ], {
    // définit la durée aléatoire entre 500 ms et 1500 ms: 500 math.random () * 1000,
    Soulage: «Cubic-Bezier (0, .9, .57, 1)»,
    // utilise des valeurs aléatoires entre 0 m et 200 ms pour retarder chaque particule: math.random () * 200
  });
  // ... (étapes suivantes)
}

Étape 5: Retirez les particules une fois l'animation terminée

 Fonction CreateParticule (x, y) {
  // ... (code précédent)
  // Lorsque l'animation est terminée, supprimez l'animation d'élément.onfinish du dom = () => {
    particule.remove ();
  };
}

Effet final

En intégrant tout le code ensemble, nous pouvons obtenir l'effet que nous voulons: l'effet d'explosion des particules coloré.

Si vous ne voyez pas d'animations dans la démo, veuillez vérifier si votre navigateur prend en charge l'API des animations Web. Pour plus de détails, veuillez vous référer au formulaire de support du navigateur au début de l'article.

Créativité illimitée

Puisque tout cela utilise CSS, la modification du style de particules est très simple. Voici quelques exemples utilisant différentes formes (même des personnages!).

Ou nous pouvons même laisser le bouton lui-même exploser comme Zach Saucier l'a fait dans ce post.

(Deuxième exemple de code supplémentaire pour d'autres formes et caractères et liens vers l'article Zach Saucier)

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!