算法可视化系列——01冒泡排序算法——可视化工具链【HTML】

冒泡排序可视化工具技术解析

一、设计理念与技术栈

本工具的核心目标是可视化冒泡排序算法，通过直观展示排序过程中元素的比较和交换，帮助用户理解冒泡排序的工作原理。

采用的技术栈：

Tailwind CSS：用于响应式UI设计和组件样式
JavaScript：实现核心排序算法和可视化逻辑
Font Awesome：提供界面图标
CSS动画：实现平滑的过渡效果

二、关键设计元素解析

1. 响应式布局与UI设计

<div class="container mx-auto px-4 py-8 max-w-6xl">
  <!-- 标题区 -->
  <header class="text-center mb-8">
    <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-primary mb-2">冒泡排序可视化</h1>
    <p class="text-gray-600 max-w-2xl mx-auto">直观展示冒泡排序算法的工作原理</p>
  </header>

  <!-- 控制面板 -->
  <div class="bg-white rounded-xl shadow-md p-4 md:p-6 mb-8">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
      <!-- 控制滑块和按钮 -->
    </div>
  </div>

  <!-- 可视化区域 -->
  <div class="bg-white rounded-xl shadow-md p-4 md:p-6">
    <div id="array-container" class="array-container bg-gray-50 rounded-lg p-4">
      <!-- 动态生成的柱状图 -->
    </div>
  </div>
</div>

设计特点：

使用响应式网格系统适应不同屏幕尺寸
卡片式设计增强视觉层次感
使用 clamp() 函数实现标题自适应字体大小

2. 排序状态可视化系统

function renderArray(highlightIndices = [], swapIndices = [], sortedIndices = []) {
  // 颜色编码系统
  if (swapIndices.includes(index)) {
    bar.classList.add('bg-danger'); // 红色 - 交换中
  } else if (highlightIndices.includes(index)) {
    bar.classList.add('bg-accent'); // 黄色 - 比较中
  } else if (sortedIndices.includes(index)) {
    bar.classList.add('bg-secondary'); // 绿色 - 已排序
  } else {
    bar.classList.add('bg-primary'); // 蓝色 - 默认状态
  }
}

颜色标识系统：

默认状态：蓝色（bg-primary）
比较中：黄色（bg-accent）
交换中：红色（bg-danger）
已排序：绿色（bg-secondary）

3. 冒泡排序算法实现

冒泡排序的核心思想是通过多次遍历数组，每次比较相邻元素，若它们的顺序不正确，则交换它们。经过多轮遍历后，最大的元素会被“冒泡”到数组末端。

async function bubbleSort() {
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len - i - 1; j++) {
      // 1. 高亮当前比较的元素
      renderArray([j, j+1], [], sortedIndices);
      
      // 2. 按排序速度等待
      await wait(sortSpeed);
      
      // 3. 比较并交换
      if (array[j] > array[j+1]) {
        // 高亮交换元素
        renderArray([], [j, j+1], sortedIndices);
        await wait(sortSpeed/2);
        
        // 执行交换
        [array[j], array[j+1]] = [array[j+1], array[j]];
        
        // 显示交换后的状态
        renderArray([], [], sortedIndices);
        await wait(sortSpeed/2);
      }
    }
    // 标记已排序的元素
    sortedIndices.push(len - 1 - i);
  }
}

4. 动画与交互控制

核心动画技术：

CSS过渡：通过 transition 实现平滑的高度变化和颜色变化。

transition: height 0.3s ease, background-color 0.3s ease;

异步控制：使用 async/await 控制排序步骤的执行。
暂停机制：通过 requestAnimationFrame 实现动画暂停时的轮询检查。

// 等待函数（支持暂停）
function wait(duration) {
  return new Promise(resolve => {
    const checkPause = () => {
      if (isPaused) {
        animationId = requestAnimationFrame(checkPause);
      } else {
        setTimeout(resolve, duration);
      }
    };
    checkPause();
  });
}

三、设计优化点

响应式柱状图：使用 @apply 和 transition 使柱状图的高度和颜色过渡更加平滑。

.array-bar {
  @apply w-3 md:w-4 rounded-t-lg bar-transition relative;
  transition: height 0.3s ease, background-color 0.3s ease;
}

性能优化：
- 使用 requestAnimationFrame 避免阻塞渲染。
- 减少不必要的 DOM 操作。
- 限制最大数组大小（例如不超过100个元素）。
用户体验优化：
- 排序完成时的闪烁动画。
- 数组大小 ≤ 30 时显示数值标签。
- 按钮状态管理（禁用/启用）。

四、算法复杂度分析

时间复杂度：

最优情况： $O (n)$ （已排序数组）
平均情况： $O(n^2)$
最差情况： $O(n^2)$ （完全逆序）

空间复杂度：

$O (1)$ （原地排序）

五、教学价值

此可视化工具通过：

直观展示算法执行过程。
支持调整参数，观察不同情况下的排序行为。
提供步骤计数器记录操作次数。
颜色编码区分不同操作状态。

帮助学习者理解：

冒泡排序的核心思想（相邻元素比较交换）。
算法的时间复杂度概念。
排序过程中数据的动态变化。

该实现展示了如何将抽象的算法转化为直观的可视化体验，是学习算法和数据结构的一个优秀教学工具。

六、HTML结构与JavaScript逻辑

HTML结构

基础文档设置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>冒泡排序可视化</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.0/dist/tailwind.min.css" rel="stylesheet">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <style>
    @layer utilities {
      /* 定义过渡效果等 */
    }
  </style>
</head>
<body>
  <!-- 详细内容 -->
</body>
</html>

JavaScript逻辑

初始化与事件监听

let array = [];
let arraySize = 20;
let sortSpeed = 100;
let isSorting = false;
let isPaused = false;

function init() {
  createNewArray();
  setupEventListeners();
}

function setupEventListeners() {
  // 按钮点击事件
  document.getElementById('start-btn').addEventListener('click', startSorting);
  document.getElementById('pause-btn').addEventListener('click', togglePause);
}

冒泡排序核心

async function bubbleSort() {
  // 冒泡排序实现
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len - i - 1; j++) {
      // 逐步更新和渲染
    }
  }
}

七、结果展示（源码去本人资源区下载）

posted @ 2025-07-30 02:09 晓律阅读(17) 评论(0) 收藏举报来源

刷新页面返回顶部

xxl1314