vue实现扩散圆
Vue 实现扩散圆效果
扩散圆效果可以通过 CSS 动画结合 Vue 的动态样式绑定实现。以下是具体实现方法：
HTML 模板部分
<template>
<div class="container">
<div
v-for="(circle, index) in circles"
:key="index"
class="ripple-circle"
:style="{
width: `${circle.size}px`,
height: `${circle.size}px`,
left: `${circle.x}px`,
top: `${circle.y}px`,
opacity: circle.opacity,
animationDelay: `${index * 0.3}s`
}"
></div>
<button @click="addCircle">点击扩散</button>
</div>
</template>Vue 脚本部分
<script>
export default {
data() {
return {
circles: []
}
},
methods: {
addCircle(event) {
const newCircle = {
x: event.clientX - 25,
y: event.clientY - 25,
size: 50,
opacity: 1
}
this.circles.push(newCircle)
setTimeout(() => {
this.circles.shift()
}, 1000)
}
}
}
</script>CSS 样式部分
<style scoped>
.container {
position: relative;
width: 100%;
height: 100vh;
}
.ripple-circle {
position: absolute;
border-radius: 50%;
background-color: rgba(0, 150, 255, 0.6);
transform: translate(-50%, -50%);
animation: ripple 1s ease-out;
animation-fill-mode: forwards;
}
@keyframes ripple {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(4);
opacity: 0;
}
}
button {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background: #0096ff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>实现原理说明
通过 Vue 的 v-for 指令动态渲染多个圆形元素，每个圆形代表一次扩散效果。点击事件触发时，创建一个新的圆形数据对象并推入数组。
CSS 动画 ripple 控制圆形的缩放和透明度变化，animationDelay 实现多个圆形动画的错开效果。动画结束后通过 setTimeout 移除旧的圆形元素，防止内存泄漏。
优化方向
可以添加限制最大圆形数量的逻辑，防止同时存在过多元素影响性能。也可以调整动画参数如持续时间、缩放倍数等，获得不同的视觉效果。
methods: {
addCircle(event) {
if(this.circles.length >= 5) return
// 其余代码不变
}
}通过调整 CSS 变量可以实现不同风格的扩散效果，如改变颜色、形状或动画曲线。
