vue实现气泡效果

实现气泡效果的方法

在Vue中实现气泡效果可以通过CSS动画、第三方库或自定义组件完成。以下是几种常见方法：

使用纯CSS动画

通过CSS的@keyframes和transform属性创建气泡上升动画：

<template>
  <div class="bubble-container">
    <div v-for="(bubble, index) in bubbles" :key="index" class="bubble" :style="bubble.style"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bubbles: []
    }
  },
  mounted() {
    setInterval(() => {
      this.createBubble()
    }, 300)
  },
  methods: {
    createBubble() {
      const size = Math.random() * 30 + 10
      const bubble = {
        size,
        style: {
          width: `${size}px`,
          height: `${size}px`,
          left: `${Math.random() * 100}%`,
          animationDuration: `${Math.random() * 3 + 2}s`
        }
      }
      this.bubbles.push(bubble)
      setTimeout(() => {
        this.bubbles.shift()
      }, 5000)
    }
  }
}
</script>

<style>
.bubble-container {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.bubble {
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: rise linear infinite;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-300px) scale(0.5);
    opacity: 0;
  }
}
</style>

使用GSAP动画库

GSAP提供更强大的动画控制能力：

<template>
  <div ref="container" class="bubble-container"></div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  mounted() {
    setInterval(() => {
      this.createBubble()
    }, 500)
  },
  methods: {
    createBubble() {
      const bubble = document.createElement('div')
      bubble.className = 'bubble'
      const size = Math.random() * 30 + 10
      bubble.style.width = `${size}px`
      bubble.style.height = `${size}px`
      bubble.style.left = `${Math.random() * 100}%`

      this.$refs.container.appendChild(bubble)

      gsap.to(bubble, {
        y: -300,
        opacity: 0,
        scale: 0.5,
        duration: Math.random() * 3 + 2,
        onComplete: () => {
          bubble.remove()
        }
      })
    }
  }
}
</script>

<style>
.bubble-container {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.bubble {
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 150, 255, 0.6);
  border-radius: 50%;
}
</style>

使用Vue过渡效果

利用Vue的<transition-group>实现气泡动画：

<template>
  <transition-group name="bubble" tag="div" class="bubble-container">
    <div 
      v-for="(bubble, index) in bubbles" 
      :key="index" 
      class="bubble" 
      :style="bubble.style"
    ></div>
  </transition-group>
</template>

<script>
export default {
  data() {
    return {
      bubbles: []
    }
  },
  mounted() {
    setInterval(() => {
      this.createBubble()
    }, 500)
  },
  methods: {
    createBubble() {
      const size = Math.random() * 30 + 10
      this.bubbles.push({
        style: {
          width: `${size}px`,
          height: `${size}px`,
          left: `${Math.random() * 100}%`
        }
      })

      setTimeout(() => {
        this.bubbles.shift()
      }, 3000)
    }
  }
}
</script>

<style>
.bubble-container {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.bubble {
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 200, 0, 0.6);
  border-radius: 50%;
  transition: all 2s ease-out;
}

.bubble-enter-active {
  animation: rise 2s forwards;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-300px) scale(0.5);
    opacity: 0;
  }
}
</style>

使用第三方组件库

例如使用vue-particles库快速实现气泡效果：

1. 安装库：

   npm install vue-particles

2. 在组件中使用：

   
   <template>
   <div class="container">
    <vue-particles
      color="#ffffff"
      :particleOpacity="0.7"
      :particlesNumber="50"
      shapeType="circle"
      :particleSize="4"
      linesColor="#ffffff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    />
   </div>
   </template>

import VueParticles from 'vue-particles' export default { components: { VueParticles } } .container { height: 100vh; background: linear-gradient(to bottom, #1e5799, #2989d8); } ```

这些方法可以根据具体需求选择，CSS动画适合简单效果，GSAP适合复杂动画，Vue过渡适合组件化场景，第三方库适合快速实现。