vue实现扩散圆

Vue 实现扩散圆效果

扩散圆效果通常用于视觉焦点提示或动画过渡，可以通过 Vue 结合 CSS 动画实现。以下是两种常见实现方式：

使用纯 CSS 动画

通过 Vue 控制 CSS 类名的切换触发动画：

<template>
  <div class="circle-container">
    <div 
      class="circle" 
      :class="{ 'expand': isExpanding }"
      @click="toggleAnimation"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanding: false
    }
  },
  methods: {
    toggleAnimation() {
      this.isExpanding = true;
      setTimeout(() => {
        this.isExpanding = false;
      }, 1000);
    }
  }
}
</script>

<style>
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #42b983;
  position: relative;
  transition: all 0.5s ease;
}

.circle.expand {
  transform: scale(2);
  opacity: 0;
}
</style>

使用 GSAP 实现高级动画

安装 GSAP 库后实现更复杂的扩散效果：

npm install gsap

<template>
  <div class="circle-container">
    <div 
      ref="circle"
      class="circle"
      @click="animateCircle"
    ></div>
  </div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  methods: {
    animateCircle() {
      gsap.to(this.$refs.circle, {
        scale: 3,
        opacity: 0,
        duration: 1,
        ease: "power2.out",
        onComplete: () => {
          gsap.set(this.$refs.circle, { scale: 1, opacity: 1 });
        }
      });
    }
  }
}
</script>

<style>
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #42b983;
  cursor: pointer;
}
</style>

多层波纹扩散效果

实现类似水波纹的多层扩散效果：

<template>
  <div class="container">
    <div 
      v-for="(wave, index) in waves"
      :key="index"
      class="wave"
      :style="{
        width: `${wave.size}px`,
        height: `${wave.size}px`,
        left: `-${wave.size/2 - 25}px`,
        top: `-${wave.size/2 - 25}px`,
        opacity: wave.opacity
      }"
    ></div>
    <div class="center-circle" @click="createWave"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      waves: [],
      maxWaves: 3
    }
  },
  methods: {
    createWave() {
      if (this.waves.length >= this.maxWaves) return;

      const newWave = {
        size: 50,
        opacity: 0.7
      };

      this.waves.push(newWave);

      const interval = setInterval(() => {
        newWave.size += 5;
        newWave.opacity -= 0.02;

        if (newWave.opacity <= 0) {
          clearInterval(interval);
          this.waves = this.waves.filter(w => w !== newWave);
        }
      }, 30);
    }
  }
}
</script>

<style>
.container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px;
}

.center-circle {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #42b983;
  cursor: pointer;
  z-index: 10;
}

.wave {
  position: absolute;
  border-radius: 50%;
  background-color: #42b983;
  transform-origin: center;
  transition: opacity 0.1s;
}
</style>

这些实现方式可以根据具体需求进行调整，如修改颜色、大小、动画时长等参数。对于更复杂的效果，可以结合 SVG 或 Canvas 实现。