js循环气泡

admin 2026年03月15日 05:54 103 0

JavaScript中循环气泡效果通常通过for或while循环结合DOM动态创建实现，核心逻辑包括：循环生成气泡元素，随机设置其位置、大小、透明度及动画时长，利用CSS transition或requestAnimationFrame实现平滑上升与淡出效果，通过setInterval或requestAnimationFrame持续调用循环函数，形成气泡连续生成的动态效果，常用于网页背景装饰或交互增强，提升页面视觉层次与用户体验，关键点在于控制气泡生成频率、动画性能及生命周期管理，确保流畅运行。

JavaScript循环气泡动画：原理、实现与优化

在网页设计中，动态效果往往能为用户带来更生动的交互体验。"循环气泡动画"是一种常见的视觉元素——气泡从底部不断生成，向上飘动并逐渐消失，形成循环往复的流动感，这种效果常用于网页背景、Loading加载页、数据可视化场景等，既能增加页面的活力，又不会过于干扰用户操作，本文将从原理出发，结合代码示例，详解如何用JavaScript实现循环气泡动画,并分享优化技巧。

循环气泡动画的核心原理

循环气泡动画的本质是"持续生成+运动消失"的循环过程,可拆解为三个核心环节：

气泡生成

通过JavaScript动态创建气泡元素（通常是<div>），并随机设置其初始属性（如大小、颜色、位置、透明度、动画时长等），确保每个气泡具有独特性，为了增强视觉效果，还可以为气泡添加渐变背景、阴影效果等。

气泡运动

通过CSS动画或JavaScript控制气泡的移动轨迹,常见的运动包括：

垂直上升：气泡从底部（或随机位置）向顶部移动；
水平飘动：模拟真实气泡的轻微左右晃动（可通过添加贝塞尔曲线实现）；
淡出消失：在上升过程中逐渐降低透明度,最终消失；
缩放效果：部分设计会让气泡在上升过程中略微放大,模拟浮力效果。

气泡消失与循环

当气泡完成运动（到达顶部或透明度为0）时，将其从DOM中移除，避免内存泄漏，通过定时器持续生成新气泡，形成"生成-运动-消失-再生成"的循环，需要控制同时存在的气泡数量,避免性能问题。

代码实现：从零开始打造循环气泡

下面分步骤实现一个基础的循环气泡动画，包含HTML结构、CSS样式和JavaScript逻辑。

HTML结构：创建气泡容器

需要一个容器来承载所有气泡，并设置容器的基本样式（如全屏、相对定位）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JavaScript循环气泡动画</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="bubble-container"></div>
    <script src="script.js"></script>
</body>
</html>

CSS样式：定义气泡外观与动画

设置气泡的基本样式（圆形、背景色、绝对定位）和运动动画（上升+淡出），为了增强视觉效果，我们可以添加渐变背景、阴影效果,并使用贝塞尔曲线让运动更自然。

/* style.css */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden; /* 防止滚动条 */
    font-family: Arial, sans-serif;
}
#bubble-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.bubble {
    position: absolute;
    border-radius: 50%; /* 圆形 */
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* 发光效果 */
    animation: rise linear infinite; /* 绑定上升动画 */
    pointer-events: none; /* 防止气泡干扰用户交互 */
}
/* 气泡上升动画 */
@keyframes rise {
    0% {
        transform: translateY(100vh) translateX(0) scale(0.8);
        opacity: 0.8;
    }
    50% {
        transform: translateY(50vh) translateX(10px) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100px) translateX(20px) scale(1.2);
        opacity: 0;
    }
}

JavaScript逻辑：控制气泡生成与循环

核心是通过setInterval定时生成气泡，随机设置其属性，并在动画结束后移除元素，为了优化性能，我们还需要实现气泡池机制,避免频繁创建和销毁DOM元素。

// script.js
const bubbleContainer = document.getElementById('bubble-container');
const bubbleCount = 15; // 同时存在的气泡数量
const minSize = 20; // 气泡最小直径（px）
const maxSize = 80; // 气泡最大直径（px）
const minDuration = 3; // 动画最短时长（s）
const maxDuration = 8; // 动画最长时长（s）
// 气泡池 - 复用气泡元素
const bubblePool = [];
const maxPoolSize = 30; // 气泡池最大容量
// 创建单个气泡
function createBubble() {
    let bubble;
    // 从气泡池中获取可用的气泡
    if (bubblePool.length > 0) {
        bubble = bubblePool.pop();
    } else {
        bubble = document.createElement('div');
        bubble.className = 'bubble';
    }
    // 随机大小
    const size = Math.random() * (maxSize - minSize) + minSize;
    bubble.style.width = `${size}px`;
    bubble.style.height = `${size}px`;
    // 随机水平位置（避免边缘）
    const left = Math.random() * (window.innerWidth - size);
    bubble.style.left = `${left}px`;
    // 随机动画时长（控制上升速度）
    const duration = Math.random() * (maxDuration - minDuration) + minDuration;
    bubble.style.animationDuration = `${duration}s`;
    // 随机延迟（避免气泡同时出现）
    const delay = Math.random() * 2;
    bubble.style.animationDelay = `${delay}s`;
    // 添加到容器
    bubbleContainer.appendChild(bubble);
    // 动画结束后回收气泡到池中
    bubble.addEventListener('animationend', function() {
        bubbleContainer.removeChild(bubble);
        if (bubblePool.length < maxPoolSize) {
            bubblePool.push(bubble);
        }
    });
}
// 初始化气泡池
function initBubblePool() {
    for (let i = 0; i < maxPoolSize; i++) {
        const bubble = document.createElement('div');
        bubble.className = 'bubble';
        bubblePool.push(bubble);
    }
}
// 开始生成气泡
function startBubbles() {
    // 初始化气泡池
    initBubblePool();
    // 定期生成气泡
    setInterval(() => {
        if (bubbleContainer.children.length < bubbleCount) {
            createBubble();
        }
    }, 300);
}
// 页面加载完成后开始动画
window.addEventListener('load', startBubbles);
// 窗口大小改变时重新计算位置
window.addEventListener('resize', () => {
    // 可以在这里添加响应式调整逻辑
});