Comment utiliser Vue pour implémenter des effets spéciaux d'animation de feux d'artifice

Comment utiliser Vue pour implémenter des effets spéciaux d'animation de feux d'artifice

Les feux d'artifice sont un magnifique phénomène naturel et un effet spécial courant dans de nombreux festivals et célébrations. Dans le développement Web, nous pouvons également implémenter des effets d'animation de feux d'artifice en utilisant le framework Vue. Cet article expliquera comment obtenir cet effet à travers des exemples de code spécifiques.

Avant de commencer, nous devons préparer l'environnement de développement Vue. Tout d’abord, assurez-vous que Node.js et Vue CLI sont installés. Ensuite, créez un nouveau projet Vue :

vue create firework-animation

Ensuite, entrez dans le répertoire du projet et démarrez le serveur de développement :

cd firework-animation
npm run serve

Nous pouvons maintenant commencer à écrire le code pour implémenter les effets spéciaux de l'animation des feux d'artifice.

Tout d'abord, créez un fichier de composant nommé Firework.vue dans le répertoire src. Dans ce composant, nous définirons le style et l'animation du feu d'artifice.

<template>
  <div class="firework" :style="{ top: posY + 'px', left: posX + 'px' }">
    <div class="dot" v-for="(particle, index) in particles" :key="index" :style="{ backgroundColor: particle.color, top: particle.y + 'px', left: particle.x + 'px' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      particles: [],
      posX: 0,
      posY: 0,
    };
  },
  methods: {
    explode() {
      for (let i = 0; i < 50; i++) {
        const particle = {
          x: 0,
          y: 0,
          color: getRandomColor(),
          speedX: getRandomFloat(-5, 5),
          speedY: getRandomFloat(-5, 5),
          gravity: 0.1,
          alpha: 1,
        };
        this.particles.push(particle);
      }
      this.animate();
    },
    animate() {
      const animation = requestAnimationFrame(this.animate);
      const canvas = this.$el.getBoundingClientRect().toJSON();

      this.particles.forEach((particle, index) => {
        particle.x += particle.speedX;
        particle.y += particle.speedY;

        particle.speedY += particle.gravity;

        if (particle.alpha > 0.1) {
          particle.alpha -= 0.01;
        } else {
          this.particles.splice(index, 1);
        }

        if (
          particle.x < canvas.left ||
          particle.x > canvas.right ||
          particle.y < canvas.top ||
          particle.y > canvas.bottom
        ) {
          this.particles.splice(index, 1);
        }
      });

      if (this.particles.length === 0) {
        cancelAnimationFrame(animation);
      }
    },
  },
  mounted() {
    this.posX = this.$el.offsetWidth / 2;
    this.posY = this.$el.offsetHeight / 2;

    setInterval(() => {
      this.explode();
    }, 1000);
  },
};

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function getRandomFloat(min, max) {
  return Math.random() * (max - min) + min;
}
</script>

<style scoped>
.firework {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: black;
  margin: 100px auto;
}

.dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
</style>

Dans ce composant, nous définissons une classe de feux d'artifice pour afficher les feux d'artifice et transmettons la position des feux d'artifice à l'élément div du modèle via la liaison de données. Chaque fois que l'on clique sur l'interface, nous appelons la méthode exploser pour déclencher l'animation d'explosion du feu d'artifice. Dans la méthode d'explosion, nous avons généré aléatoirement 50 particules et leur avons défini des positions, des couleurs et des vitesses aléatoires. Ensuite, nous utilisons requestAnimationFrame pour implémenter l'effet d'animation, mettre à jour la position des particules à chaque image et déterminer si les particules dépassent la plage d'écran ou si la transparence est inférieure à 0,1. Si tel est le cas, supprimez les particules du tableau.

Enfin, nous avons ajouté une petite quantité de style au composant pour définir l'apparence et l'emplacement du feu d'artifice. Notez que nous utilisons le modificateur scoped pour limiter la portée du style afin d'éviter les conflits avec d'autres composants ou styles globaux.

Enfin, utilisez ce composant dans App.vue :

<template>
  <div id="app">
    <Firework></Firework>
  </div>
</template>

<script>
import Firework from './components/Firework.vue';

export default {
  name: 'App',
  components: {
    Firework,
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

Maintenant, exécutez la commande npm run serve, ouvrez le navigateur et visitez http://localhost:8080, vous verrez une zone avec des points blancs sur fond noir , Lorsque vous cliquez sur l'interface, l'effet d'animation du feu d'artifice sera déclenché.

Les effets d'animation de feux d'artifice implémentés dans cet article sont implémentés via le framework Vue. Vous pouvez suivre l'exemple de code pour apporter des personnalisations et des améliorations pertinentes pour répondre à vos besoins. J'espère que cet article vous sera utile pour apprendre Vue et implémenter des effets spéciaux d'animation de feux d'artifice !

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!