数据可视化大屏项目开发中，需要粒子效果装饰，今天来实现一下粒子上升的效果。
效果预览
我们将创建一个包含多个粒子的容器，这些粒子将随机生成并向上移动，直到消失在容器的顶部边界，然后再生成新的粒子，形成一个连续的循环效果。
实现步骤
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的默认值，我们可以轻松地自定义粒子的数量、颜色、大小和发光效果，使得这个效果更加灵活和多变。
演示效果
项目应用
vue实现鼠标滚轮滚动组件效果
项目基于vue3+vite+js nodejs 16开发，购买代码请确保有相关开发基础
虚拟产品一经售出 概不退款请谅解
