0. 先和大家打个招呼吧 
大家好！我是 凉风有信，一名热爱算法与可视化的独立开发者，也是一名正在不断学习的前端爱好者。
这个项目完全是用 TRAE 配合 AI 辅助开发完成的。说实话，作为一个对复杂动画和 Canvas 渲染不太熟悉的人，如果没有 TRAE，我很难想象自己能独立完成这样一个交互式算法可视化平台。我的开发流程很简单：先把自己的想法用自然语言描述给 TRAE，比如"我想做一个排序算法的可视化页面，要有进度条控制、速度调节，还要有代码高亮同步"，然后 TRAE 会帮我把这些想法一步步落地成代码。
最让我感到"原来这么简单"的时刻，是当我告诉 TRAE "我想做一个可以拖拽调整数组元素、实时看到排序过程变化的交互面板"时，它直接帮我生成了完整的 Canvas 交互逻辑和状态管理代码，还附带了详细的注释。那一刻我真的觉得，AI 让创意的门槛变得前所未有的低。
TRAE 帮我跨过的最大一个坎，是算法动画的帧同步问题——我自己写的时候总是会出现动画卡顿或者状态不同步的情况，但 TRAE 帮我设计了一套基于 requestAnimationFrame 的状态机架构，让整个可视化流程变得丝滑流畅。
1. Demo 简介
是什么： 算法可视化实验室（Arithmetic Visualizer）是一个基于 Web 的交互式算法可视化平台，采用独特的"新野兽派"视觉风格设计。
面向谁： 核心用户是计算机科学专业的学生、算法初学者、以及任何想通过直观动画理解算法运行原理的技术爱好者。
主要功能：
-
多算法可视化支持 —— 支持排序、搜索、图算法等多种经典算法的分步动画演示，用户可以实时看到每一步的数据变化。
-
交互式参数控制 —— 用户可以自定义输入数据、调节动画速度、暂停/播放/单步执行，完全掌控学习节奏。
-
代码与动画同步高亮 —— 左侧展示算法源码，右侧展示可视化动画，当前执行的代码行会高亮显示，帮助用户建立"代码逻辑"与"执行过程"的直观联系。
2. Demo 创作思路
灵感来源： 我在自学算法的过程中，发现很多经典教材和博客虽然讲得很清楚，但"静态的文字+图片"很难让人真正理解算法在运行时的动态变化。我希望能有一个工具，让算法的每一步都"活"起来，像看电影一样直观。
想解决的问题：
- 算法初学者看不懂抽象的伪代码，缺乏直观感受；
- 现有可视化工具风格千篇一律，缺乏设计感和沉浸感；
- 很多工具只支持预设数据，无法让用户自由探索。
为什么做这个方向： 我相信"可视化"是降低算法学习门槛的最有效方式之一。同时，我选择"新野兽派"风格，是因为我希望这个工具不仅实用，还能在视觉上给人留下深刻印象——学习算法也可以是一件很酷的事。
3. Demo 体验地址
在线体验： 算法可视化实验室 | Algorithm Visualizer
直接点击链接即可访问，无需安装任何软件，支持 PC 和移动端浏览器。
4. TRAE 实践过程
整个项目从 0 到 1 的开发流程完全在 TRAE 中完成，以下是关键步骤：
步骤一：项目架构搭建
- 使用 TRAE 初始化 React + Vite 项目结构，配置路由和状态管理。
- TRAE 帮我生成了模块化的组件架构，将算法逻辑、渲染引擎、UI 控制面板完全解耦。
步骤二：核心可视化引擎开发
- 向 TRAE 描述需求：“需要一个 Canvas 渲染引擎，能够根据算法状态实时绘制数组柱状图，支持颜色变化表示元素状态（未排序/比较中/已排序）。”
- TRAE 生成了完整的 Canvas 渲染类，包含动画插值、颜色过渡、以及性能优化。
步骤三：算法逻辑与动画同步
- 这是最关键的一步。我需要让算法每一步的执行都能触发对应的动画帧。
- TRAE 帮我设计了一个基于 Generator 函数的异步执行器，让算法可以"暂停"在任意一步，等待动画完成后再继续执行，完美实现了代码高亮与动画的同步。
步骤四：UI 设计与交互优化
- 我向 TRAE 描述了"新野兽派"的设计需求——大胆的色彩对比、粗犷的排版、几何感强烈的按钮。
- TRAE 帮我生成了 CSS 样式方案，并持续迭代优化，直到达到我想要的视觉效果。
关键任务对话 Session ID：
3036219990088713:7141b685611c5d2709f43ac3dc1ab324_6a31482cd1ccaf3d36b98fd7.6a31482cd1ccaf3d36b98fda.6a31482cd1ccaf3d36b98fd8:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/16 20:57:16)
3036219990088713:1b241d6cff20610bc29fc8fb203c4de0_6a3786c1e528e29b3d09d1c2.6a378948e528e29b3d09d1d0.6a378948e528e29b3d09d1ce:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/21 14:48:40)
3036219990088713:3e844951c178c40178657cb459f76afa_6a3786c1e528e29b3d09d1c2.6a378f88e528e29b3d09d29e.6a378f88e528e29b3d09d29c:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/21 15:15:20)
3036219990088713:353f72122aac77b2f3e0909972205f6a_6a407e599a7cba0473236b91.6a40aac09a7cba0473237702.6a40aac09a7cba0473237700:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/28 13:01:52)
，过几天有空我会同步更新的
代码与动画同步高亮的交互设计特别好，左侧代码行高亮+右侧Canvas柱状图实时变化，让"代码逻辑"和"执行过程"建立了直观联系。基于Generator函数的异步执行器让算法可以暂停在任意一步，这个技术方案很优雅。