js 实现气泡

气泡效果实现方法

在JavaScript中实现气泡效果通常涉及DOM操作和CSS样式设置。以下是几种常见方法：

使用CSS和JavaScript创建基础气泡

HTML结构：

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

CSS样式：

.bubble {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0, 150, 255, 0.6);
  position: absolute;
  animation: float 3s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

JavaScript控制：

const container = document.querySelector('.bubble-container');
const bubble = document.querySelector('.bubble');

function createBubble() {
  const newBubble = bubble.cloneNode();
  newBubble.style.left = `${Math.random() * 100}%`;
  newBubble.style.opacity = Math.random() * 0.5 + 0.3;
  newBubble.style.width = `${Math.random() * 30 + 20}px`;
  newBubble.style.height = newBubble.style.width;
  container.appendChild(newBubble);

  setTimeout(() => {
    newBubble.remove();
  }, 3000);
}

setInterval(createBubble, 500);

使用Canvas实现高性能气泡

HTML结构：

<canvas id="bubbleCanvas"></canvas>

JavaScript实现：

const canvas = document.getElementById('bubbleCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const bubbles = [];

class Bubble {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = canvas.height + Math.random() * 100;
    this.size = Math.random() * 30 + 10;
    this.speed = Math.random() * 2 + 1;
    this.opacity = Math.random() * 0.5 + 0.3;
  }

  update() {
    this.y -= this.speed;
    if (this.y < -this.size) {
      this.y = canvas.height + this.size;
      this.x = Math.random() * canvas.width;
    }
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(0, 150, 255, ${this.opacity})`;
    ctx.fill();
  }
}

function init() {
  for (let i = 0; i < 50; i++) {
    bubbles.push(new Bubble());
  }
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  bubbles.forEach(bubble => {
    bubble.update();
    bubble.draw();
  });
  requestAnimationFrame(animate);
}

init();
animate();

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

使用CSS动画和变换

纯CSS方案结合少量JavaScript触发：

<div class="bubble-animation"></div>

CSS样式：

.bubble-animation {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.bubble {
  position: absolute;
  bottom: -50px;
  background-color: rgba(0, 150, 255, 0.5);
  border-radius: 50%;
  animation: rise 4s infinite;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-400px) scale(1.2);
    opacity: 0;
  }
}

JavaScript控制：

function generateBubbles() {
  const container = document.querySelector('.bubble-animation');
  const bubbleCount = 20;

  for (let i = 0; i < bubbleCount; i++) {
    const bubble = document.createElement('div');
    bubble.classList.add('bubble');
    const size = Math.random() * 40 + 10;
    bubble.style.width = `${size}px`;
    bubble.style.height = `${size}px`;
    bubble.style.left = `${Math.random() * 100}%`;
    bubble.style.animationDelay = `${Math.random() * 5}s`;
    container.appendChild(bubble);
  }
}

generateBubbles();

使用第三方库实现高级效果

使用anime.js库创建更复杂的动画：

import anime from 'animejs';

function createAnimeBubbles() {
  const container = document.getElementById('bubble-container');

  for (let i = 0; i < 15; i++) {
    const bubble = document.createElement('div');
    bubble.className = 'anime-bubble';
    container.appendChild(bubble);

    anime({
      targets: bubble,
      translateY: [-50, -300],
      translateX: () => anime.random(-30, 30),
      scale: [0.8, 1.2],
      opacity: [0.8, 0],
      duration: 3000,
      delay: i * 200,
      easing: 'easeOutQuad',
      complete: () => {
        bubble.remove();
        createAnimeBubbles();
      }
    });
  }
}

createAnimeBubbles();

响应式气泡效果

确保气泡在不同屏幕尺寸下正常工作：

function responsiveBubbles() {
  const canvas = document.getElementById('responsiveCanvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // 之前的Canvas气泡代码
  // ...
}

window.addEventListener('resize', responsiveBubbles);
window.addEventListener('load', responsiveBubbles);

以上方法提供了从简单到复杂的多种实现方式，可根据项目需求选择合适的方案。DOM操作适合少量气泡，Canvas适合大量气泡性能要求高的场景，第三方库则能实现更复杂的动画效果。