How to use Vue to implement fireworks animation special effects

How to use Vue to implement fireworks animation special effects

Fireworks are a beautiful natural phenomenon and a common special effect in many festivals and celebrations. In web development, we can also implement fireworks animation effects by using the Vue framework. This article will introduce how to achieve this effect through specific code examples.

Before we start, we need to prepare the Vue development environment. First, make sure you have Node.js and Vue CLI installed. Then, create a new Vue project:

vue create firework-animation

Next, enter the project directory and start the development server:

cd firework-animation
npm run serve

Now we can start writing the code to implement the fireworks animation special effects.

First, create a component file named Firework.vue in the src directory. In this component, we will define the style and animation of the fireworks.

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

In this component, we define a fireworks class to display fireworks, and pass the position of the fireworks to the div element in the template through data binding. Each time the interface is clicked, we call the explode method to trigger the fireworks explosion animation. In the explode method, we randomly generated 50 particles and set random positions, colors, and speeds for them. Then, we use requestAnimationFrame to implement the animation effect, update the position of the particles each frame, and determine whether the particles exceed the screen range or whether the transparency is less than 0.1. If so, delete the particles from the array.

Finally, we added a small amount of styling to the component to define the appearance and placement of the fireworks. Note that we use the scoped modifier to limit the scope of the style to avoid conflicts with other components or global styles.

Finally, use this component in 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>

Now, run the npm run serve command, open the browser, and visit http://localhost:8080, you will see An area with white dots on a black background will trigger a firework animation effect when you click on the interface.

The fireworks animation effects implemented in this article are implemented through the Vue framework. You can make relevant customizations and improvements according to the sample code to meet your needs. I hope this article will be helpful for you to learn Vue and implement fireworks animation special effects!

The above is the detailed content of How to use Vue to implement fireworks animation special effects. For more information, please follow other related articles on the PHP Chinese website!