Cara menggunakan Vue untuk melaksanakan kesan khas animasi bunga api

Cara menggunakan Vue untuk melaksanakan kesan khas animasi bunga api

Bunga api ialah fenomena semula jadi yang indah dan kesan khas yang biasa dalam banyak perayaan dan perayaan. Dalam pembangunan web, kami juga boleh melaksanakan kesan animasi bunga api dengan menggunakan rangka kerja Vue. Artikel ini akan memperkenalkan cara untuk mencapai kesan ini melalui contoh kod tertentu.

Sebelum kita mula, kita perlu menyediakan persekitaran pembangunan Vue. Mula-mula, pastikan anda memasang Node.js dan Vue CLI. Kemudian, buat projek Vue baharu:

vue create firework-animation

Seterusnya, masukkan direktori projek dan mulakan pelayan pembangunan:

cd firework-animation
npm run serve

Sekarang kita boleh mula menulis kod untuk melaksanakan kesan khas animasi bunga api.

Mula-mula, buat fail komponen bernama Firework.vue dalam direktori src. Dalam komponen ini, kami akan menentukan gaya dan animasi bunga api.

<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>

Dalam komponen ini, kami mentakrifkan kelas bunga api untuk memaparkan bunga api, dan menghantar kedudukan bunga api kepada elemen div dalam templat melalui pengikatan data. Setiap kali antara muka diklik, kami memanggil kaedah letupan untuk mencetuskan animasi letupan bunga api. Dalam kaedah letupan, kami menjana 50 zarah secara rawak dan menetapkan kedudukan rawak, warna dan kelajuan untuknya. Kemudian, kami menggunakan requestAnimationFrame untuk melaksanakan kesan animasi, mengemas kini kedudukan zarah setiap bingkai dan menentukan sama ada zarah melebihi julat skrin atau sama ada ketelusan kurang daripada 0.1, padamkan zarah daripada tatasusunan.

Akhir sekali, kami menambah sedikit penggayaan pada komponen untuk menentukan penampilan dan penempatan bunga api. Harap maklum bahawa kami menggunakan pengubah suai berskop untuk mengehadkan skop gaya untuk mengelakkan konflik dengan komponen lain atau gaya global.

Akhir sekali, gunakan komponen ini dalam 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>

Sekarang, jalankan arahan npm run serve, buka penyemak imbas dan lawati http://localhost:8080, anda akan melihat kawasan dengan titik putih pada latar belakang hitam , Apabila anda mengklik pada antara muka, kesan animasi bunga api akan dicetuskan.

Kesan animasi bunga api yang dilaksanakan dalam artikel ini dilaksanakan melalui rangka kerja Vue Anda boleh mengikuti kod sampel untuk membuat penyesuaian dan penambahbaikan yang berkaitan untuk memenuhi keperluan anda. Saya harap artikel ini akan membantu anda mempelajari Vue dan melaksanakan kesan khas animasi bunga api!

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan kesan khas animasi bunga api. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!