vue3生成随机上升的粒子效果

数据可视化大屏项目开发中，需要粒子效果装饰，今天来实现一下粒子上升的效果。

效果预览

我们将创建一个包含多个粒子的容器，这些粒子将随机生成并向上移动，直到消失在容器的顶部边界，然后再生成新的粒子，形成一个连续的循环效果。

实现步骤

1. 定义组件结构

首先，我们需要在Vue组件的模板中定义一个容器，用于包含所有的粒子元素：

<template>
  <div id="particle-container" ref="particle-container">
    <div
        v-for="particle in particles"
        :key="particle.id"
        class="particle"
        :style="particleStyle(particle)"
    ></div>
  </div>
</template>

2. 设置组件样式

接下来，我们为粒子容器和粒子本身设置基本的CSS样式：

<style>
#particle-container {
  position: fixed;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.particle {
  position: absolute;
  border-radius: 50%;
}
</style>

3. 定义组件逻辑

在<script>标签中，我们定义了粒子的数据结构、生成粒子的方法、以及动画逻辑：

<script>
export default {
  props: {
    // 粒子数量、颜色、发光颜色、大小范围
    particleNumber: { type: Number, default: 5 },
    particleColor: { type: String, default: 'white' },
    glowColor: { type: String, default: 'rgba(255, 255, 255, 0.8)' },
    minSize: { type: Number, default: 2 },
    maxSize: { type: Number, default: 5 },
  },
  data() {
    return {
      particles: [],
    };
  },
  mounted() {
    this.generateParticles();
    this.animateParticles();
  },
  methods: {
    // 粒子生成和动画相关的方法
  },
};
</script>

4. 动态粒子样式

我们使用Vue的绑定功能来动态设置每个粒子的样式：

methods: {
  particleStyle(particle) {
    return {
      left: particle.x + 'px',
      top: particle.y + 'px',
      width: particle.size + 'px',
      height: particle.size + 'px',
      backgroundColor: particle.color,
      boxShadow: `0 0 8px 2px ${particle.glowColor}`,
    };
  },
  // 其他方法...
}

5. 粒子动画

我们使用requestAnimationFrame来创建一个平滑的动画循环，不断更新粒子的位置，并在粒子移动到容器顶部之外时重新生成它们：

methods: {
  // ...其他方法
  animateParticles() {
    // 更新粒子位置的代码
    this.$nextTick(() => {
      requestAnimationFrame(this.animateParticles);
    });
  },
}

结论

通过上述步骤，我们可以在Vue中实现一个简单而又迷人的随机上升粒子效果。这个效果不仅可以增强用户体验，还可以作为学习Vue动态样式和动画的一个实践案例。通过调整props的默认值，我们可以轻松地自定义粒子的数量、颜色、大小和发光效果，使得这个效果更加灵活和多变。

演示效果

vue3生成随机上升的粒子效果

项目应用

物流大数据可视化大屏

vue实现鼠标滚轮滚动组件效果

项目基于vue3+vite+js nodejs 16开发，购买代码请确保有相关开发基础

虚拟产品一经售出概不退款请谅解