PHP负责生成冒泡排序每轮数组快照并输出JSON，前端JS按帧读取数据、用CSS transition实现数字位移动画，配合缩放和颜色变化增强“气泡上浮”视觉效果。
注意：PHP 是服务端脚本语言，本身不直接渲染动画，所谓“冒泡排序动画”需借助 PHP 生成中间数据（如每轮排序状态），再由前端（HTML + CSS + JavaScript）动态展示。下面提供可落地的完整思路与关键实现逻辑。
核心分工：PHP 负责“算”，前端负责“画”
PHP 不操控 DOM、不控制帧率，因此不能“实时画气泡上浮”。真正可行的做法是：
- PHP 函数逐轮执行冒泡过程，记录每一趟比较后的数组快照（例如第 0 轮、第 1 轮……直到完成）；
- 将这些快照以 JSON 格式输出（或嵌入 HTML 页面）；
- 前端 JS 读取数据，用定时器逐帧渲染——比如每 500ms 显示一轮结果，配合 CSS 过渡模拟“上浮/下沉”视觉效果。
PHP 部分：带步骤记录的冒泡函数
改写标准冒泡函数，让它返回**全过程状态数组**，而非仅最终结果：
<?php
function bubbleSortTrace($arr) {
$steps = [$arr]; // 第 0 步：原始数组
$n = count($arr);
for ($i = 0; $i < $n - 1; $i++) {
$swapped = false;
for ($j = 0; $j < $n - 1 - $i; $j++) {
if ($arr[$j] > $arr[$j + 1]) {
$temp = $arr[$j];
$arr[$j] = $arr[$j + 1];
$arr[$j + 1] = $temp;
$swapped = true;
}
}
if (!$swapped) break; // 提前终止
$steps[] = $arr; // 记录本轮结束后的数组
}
return $steps;
}
<p>// 示例调用
$data = [6, 2, 8, 1, 9];
$trace = bubbleSortTrace($data);
echo json_encode($trace);
?>输出类似：[ [6,2,8,1,9], [2,6,1,8,9], [2,1,6,8,9], [1,2,6,8,9] ] —— 每个子数组就是一帧画面。
立即学习“PHP免费学习笔记（深入）”；
前端部分：用 JS + CSS 实现“气泡感”动画
关键不是真实物理模拟，而是用视觉暗示强化“小数上浮”印象：
- 为每个数字包裹
<div class="bubble">，设置固定宽高、圆角、阴影； - 用
transform: translateY()控制垂直位置，配合transition: transform 0.4s ease-out； - JS 每次加载新数组时，按索引把数字填入对应位置的 bubble 元素，并触发位移（例如：上一轮在位置 3 的数，本轮移到位置 1 → 向上滑动）；
- 可加细微缩放（
scale(1.05)）和颜色变化（如交换时背景变黄），增强交互反馈。
轻量整合建议（单文件方案）
把 PHP 输出嵌入 HTML 页面，避免 AJAX 请求，适合教学演示：
<?php
$steps = bubbleSortTrace([5, 3, 7, 1, 4]);
?>
<script>
const frames = <?= json_encode($steps) ?>;
let stepIndex = 0;
const container = document.getElementById('animation');
function renderFrame() {
if (stepIndex >= frames.length) return;
container.innerHTML = frames[stepIndex]
.map((num, i) =>
<div class="bubble" style="order:<?= $i ?>><?= $num ?></div>
).join('');
stepIndex++;
}
setInterval(renderFrame, 600);
</script>为什么这样设计更实用
不依赖外部框架、不强制要求 CLI 或 WebSocket，纯 PHP + 原生 JS 即可运行；学生能清晰看到“每轮发生了什么”，理解 边界收缩（$n - 1 - $i） 和 提前退出（$swapped） 的实际作用；也便于扩展——比如点击暂停、回退一步、高亮当前比较的两个元素等。
