js实现气泡效果

使用 CSS 和 JavaScript 实现气泡效果

气泡效果可以通过 CSS 动画和 JavaScript 事件监听实现。以下是几种常见的气泡效果实现方法：

CSS 动画结合 JavaScript 触发

通过 CSS 定义气泡的样式和动画，JavaScript 用于触发动画或动态创建气泡元素。

.bubble {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(0.5);
    opacity: 0;
  }
}

document.addEventListener('click', (e) => {
  const bubble = document.createElement('div');
  bubble.className = 'bubble';

  // 设置气泡大小
  const size = Math.random() * 50 + 20;
  bubble.style.width = `${size}px`;
  bubble.style.height = `${size}px`;

  // 设置气泡位置
  bubble.style.left = `${e.clientX - size/2}px`;
  bubble.style.top = `${e.clientY - size/2}px`;

  // 随机颜色
  bubble.style.backgroundColor = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, 0.6)`;

  document.body.appendChild(bubble);

  // 动画结束后移除元素
  setTimeout(() => {
    bubble.remove();
  }, 3000);
});

Canvas 实现气泡效果

对于更复杂的气泡效果，可以使用 Canvas 进行绘制。

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

const canvas = document.getElementById('bubbleCanvas');
const ctx = canvas.getContext('2d');

// 设置canvas尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 气泡数组
const bubbles = [];

// 气泡类
class Bubble {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 30 + 10;
    this.speedY = Math.random() * 2 + 1;
    this.opacity = Math.random() * 0.5 + 0.3;
    this.color = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, ${this.opacity})`;
  }

  update() {
    this.y -= this.speedY;
    if (this.y < -this.size) {
      this.y = canvas.height + this.size;
    }
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
}

// 初始化气泡
for (let i = 0; i < 50; i++) {
  bubbles.push(new Bubble(
    Math.random() * canvas.width,
    Math.random() * canvas.height
  ));
}

// 动画循环
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  bubbles.forEach(bubble => {
    bubble.update();
    bubble.draw();
  });

  requestAnimationFrame(animate);
}

animate();

SVG 实现气泡效果

SVG 也可以用来创建平滑的气泡动画效果。

<svg id="bubbleSvg" width="100%" height="100%"></svg>

const svg = document.getElementById('bubbleSvg');

function createBubble(x, y) {
  const bubble = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  const size = Math.random() * 30 + 10;
  const duration = Math.random() * 3 + 2;

  bubble.setAttribute("cx", x);
  bubble.setAttribute("cy", y);
  bubble.setAttribute("r", size);
  bubble.setAttribute("fill", `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, 0.6)`);

  svg.appendChild(bubble);

  // 动画
  const animateY = document.createElementNS("http://www.w3.org/2000/svg", "animate");
  animateY.setAttribute("attributeName", "cy");
  animateY.setAttribute("from", y);
  animateY.setAttribute("to", -size);
  animateY.setAttribute("dur", `${duration}s`);
  animateY.setAttribute("fill", "freeze");

  const animateOpacity = document.createElementNS("http://www.w3.org/2000/svg", "animate");
  animateOpacity.setAttribute("attributeName", "opacity");
  animateOpacity.setAttribute("from", "0.6");
  animateOpacity.setAttribute("to", "0");
  animateOpacity.setAttribute("dur", `${duration}s`);
  animateOpacity.setAttribute("fill", "freeze");

  bubble.appendChild(animateY);
  bubble.appendChild(animateOpacity);

  animateY.beginElement();
  animateOpacity.beginElement();

  // 动画结束后移除
  setTimeout(() => {
    svg.removeChild(bubble);
  }, duration * 1000);
}

// 点击创建气泡
svg.addEventListener('click', (e) => {
  createBubble(e.clientX, e.clientY);
});

使用第三方库实现

如果需要更复杂的气泡效果，可以考虑使用第三方动画库如 GSAP、Anime.js 等。

// 使用GSAP实现气泡效果
document.addEventListener('click', (e) => {
  const bubble = document.createElement('div');
  bubble.className = 'bubble';
  document.body.appendChild(bubble);

  // 设置初始样式
  gsap.set(bubble, {
    x: e.clientX,
    y: e.clientY,
    width: Math.random() * 50 + 20,
    height: Math.random() * 50 + 20,
    backgroundColor: `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, 0.6)`,
    borderRadius: '50%',
    position: 'absolute'
  });

  // 动画
  gsap.to(bubble, {
    y: -100,
    opacity: 0,
    duration: 3,
    ease: "power1.out",
    onComplete: () => bubble.remove()
  });
});

以上方法提供了不同复杂度的气泡效果实现方案，可以根据项目需求选择适合的方法。CSS 方法最简单，Canvas 适合大量气泡场景，SVG 提供矢量平滑效果，而第三方库则能实现更专业的动画效果。