```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // 动画配置常量 const CONFIG = { viewWidth: 800, viewHeight: 450, bubbleSize: 60, gap: 30, animationSpeed: 800, // 交换动画时长 ms stepDelay: 1000, // 每步停顿 ms colors: { bg: '#0f172a', primary: '#38bdf8', // 蓝色 locked: '#fbbf24', // 金色 frame: '#60a5fa', // 聚焦框颜色 success: '#4ade80', // 比较正确（绿色） text: '#ffffff' } }; // 气泡数据接口 interface BubbleData { id: number; value: number; isLocked: boolean; } export const BubbleSortTechAnimation = () => { // 核心状态 const [bubbles, setBubbles] = useState([ { id: 5, value: 5, isLocked: false }, { id: 1, value: 1, isLocked: false }, { id: 4, value: 4, isLocked: false }, { id: 2, value: 2, isLocked: false }, { id: 8, value: 8, isLocked: false }, ]); const [focusIndices, setFocusIndices] = useState(null); // 当前聚焦的两个索引 const [message, setMessage] = useState('准备开始冒泡排序...'); const [isSuccessFlash, setIsSuccessFlash] = useState(false); // 控制聚焦框闪烁绿光 const [isFinished, setIsFinished] = useState(false); // 动画是否完全结束 // 引用保持，防止Effect依赖闭包旧值 const bubblesRef = useRef(bubbles); bubblesRef.current = bubbles; const isRunningRef = useRef(false); // 生成背景粒子 (只运行一次) const particles = useMemo(() => { return Array.from({ length: 20 }).map((_, i) => ({ id: i, x: Math.random() * CONFIG.viewWidth, y: Math.random() * CONFIG.viewHeight + CONFIG.viewHeight, // 从底部开始 r: Math.random() * 3 + 1, speed: Math.random() * 2 + 0.5, delay: Math.random() * 5 })); }, []); // 辅助函数：等待 const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); // 主排序逻辑 useEffect(() => { if (isRunningRef.current) return; isRunningRef.current = true; const runSort = async () => { await wait(1000); // 初始等待 const arr = [...bubblesRef.current]; const n = arr.length; setMessage('【第一幕】最大的气泡 [8] 开始上浮'); for (let i = 0; i < n - 1; i++) { // 设置幕间文字 if (i === 1) setMessage('【第二幕】第二大的气泡 [5] 开始上浮'); if (i === 2) setMessage('【第三幕】加速处理剩余气泡...'); for (let j = 0; j < n - i - 1; j++) { // 1. 聚焦 setFocusIndices([j, j + 1]); // 动态文字描述 const leftVal = arr[j].value; const rightVal = arr[j + 1].value; if (leftVal > rightVal) { // 需要交换 setMessage(`比较 [${leftVal}] 和 [${rightVal}]：${leftVal} > ${rightVal}，交换位置！`); } else { // 不需要交换 setMessage(`比较 [${leftVal}] 和 [${rightVal}]：顺序正确，无需交换。`); } await wait(CONFIG.stepDelay); // 2. 比较与动作 if (leftVal > rightVal) { // 交换数据 const temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; // 更新视图触发动画 setBubbles([...arr]); await wait(CONFIG.animationSpeed); // 等待CSS过渡完成 } else { // 闪烁绿光 setIsSuccessFlash(true); await wait(600); setIsSuccessFlash(false); } } // 3. 锁定当前最大的气泡 const lockedIdx = n - i - 1; arr[lockedIdx].isLocked = true; setBubbles([...arr]); // 高潮文字 if (i === 0) { setMessage('🎉 第一轮结束！最大的 [8] 已锁定在水面。'); await wait(2000); } else if (i === 1) { setMessage('🎉 第二轮结束！[5] 也已锁定。'); await wait(1500); } setFocusIndices(null); await wait(500); } // 最后剩下的第一个也锁定 arr[0].isLocked = true; setBubbles([...arr]); setIsFinished(true); setMessage('这就是冒泡排序——最大的数字一路“顶”到序列末尾。'); }; runSort(); // 清理函数 return () => { isRunningRef.current = false; }; }, []); // 计算位置辅助函数 const totalWidth = bubbles.length * CONFIG.bubbleSize + (bubbles.length - 1) * CONFIG.gap; const startX = (CONFIG.viewWidth - totalWidth) / 2; const getX = (index: number) => startX + index * (CONFIG.bubbleSize + CONFIG.gap); const centerY = CONFIG.viewHeight / 2; // 聚焦框位置 let focusRect = null; if (focusIndices) { const x1 = getX(focusIndices[0]); const x2 = getX(focusIndices[1]); focusRect = { x: x1 - 10, y: centerY - CONFIG.bubbleSize / 2 - 20, width: (x2 - x1) + CONFIG.bubbleSize + 20, height: CONFIG.bubbleSize + 40 }; } return (

); }; ```