当前位置：首页 > VUE

vue实现扩散圆圈

2026-01-18 20:31:10VUE

Vue实现扩散圆圈的方法

通过Vue结合CSS动画可以实现扩散圆圈的视觉效果，以下是两种常见实现方式：

vue实现扩散圆圈

使用纯CSS动画

在Vue组件中通过动态样式实现扩散效果：

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',
        animationDelay: circle.delay + 's'
      }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      circles: [
        { size: 100, delay: 0 },
        { size: 150, delay: 0.3 },
        { size: 200, delay: 0.6 }
      ]
    }
  }
}
</script>

<style>
.circle-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #42b983;
  opacity: 0;
  animation: ripple 1.5s ease-out infinite;
}

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

使用GSAP动画库

对于更复杂的动画效果，可以引入GSAP实现：

<template>
  <div ref="circle" class="circle"></div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  mounted() {
    const tl = gsap.timeline({ repeat: -1 })
    tl.to(this.$refs.circle, {
      scale: 2,
      opacity: 0,
      duration: 1.5,
      ease: "power2.out"
    })
  }
}
</script>

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

动态控制动画

通过Vue的数据绑定实现动画控制：

<template>
  <div>
    <button @click="triggerRipple">触发扩散</button>
    <div 
      v-if="showCircle"
      class="dynamic-circle"
      :style="circleStyle"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCircle: false,
      circleSize: 0
    }
  },
  computed: {
    circleStyle() {
      return {
        width: this.circleSize + 'px',
        height: this.circleSize + 'px'
      }
    }
  },
  methods: {
    triggerRipple() {
      this.showCircle = true
      this.circleSize = 20

      const interval = setInterval(() => {
        this.circleSize += 10
        if (this.circleSize > 100) {
          clearInterval(interval)
          this.showCircle = false
        }
      }, 50)
    }
  }
}
</script>