当前位置：首页 > VUE

vue实现扩散圆

2026-03-28 20:41:01VUE

实现扩散圆效果

在Vue中实现扩散圆效果可以通过CSS动画结合动态数据绑定完成。以下是两种常见实现方式：

vue实现扩散圆

CSS动画实现

通过@keyframes定义缩放动画，结合Vue的v-bind动态控制样式：

vue实现扩散圆

<template>
  <div class="circle-container">
    <div 
      v-for="(circle, index) in circles" 
      :key="index"
      class="ripple-circle"
      :style="{
        width: `${circle.size}px`,
        height: `${circle.size}px`,
        animation: `ripple ${circle.duration}s ease-out infinite`
      }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      circles: [
        { size: 100, duration: 3 },
        { size: 150, duration: 4 },
        { size: 200, duration: 5 }
      ]
    }
  }
}
</script>

<style>
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 150, 255, 0.6);
  transform: scale(0);
  opacity: 0;
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
</style>

JavaScript动态控制

通过requestAnimationFrame实现更精细的控制：

<template>
  <div class="canvas-container">
    <canvas ref="canvas" width="400" height="400"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      let circles = [];

      function createCircle() {
        circles.push({
          x: 200,
          y: 200,
          radius: 10,
          alpha: 1,
          speed: 2
        });
      }

      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        circles.forEach((circle, index) => {
          ctx.beginPath();
          ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
          ctx.strokeStyle = `rgba(0, 150, 255, ${circle.alpha})`;
          ctx.lineWidth = 2;
          ctx.stroke();

          circle.radius += circle.speed;
          circle.alpha -= 0.01;

          if (circle.alpha <= 0) {
            circles.splice(index, 1);
          }
        });

        requestAnimationFrame(animate);
      }

      setInterval(createCircle, 500);
      animate();
    }
  }
}
</script>