小学编程动画理解

要解决什么问题

学排序、二分查找或栈/队列/链表时，常见痛点是：教材只有伪代码，视频是固定循环，学生没法在自己关心的那一步停住、预测下一步再对照。静态截图还要人工翻页，和「算法在状态机里一步步变」的直觉对不上。

技能如何工作

本技能按主题走固定流水线：先归类到排序、查找或数据结构，再默认采用少儿向文案（也可在用户提到 Big-O、面试/课设时切到技术模式）。核心实现是先跑一遍算法、把每一步压成 action 数组（比较、交换、入栈、访问节点等），界面只做逐步回放——这样 Next step 时序稳定，也不会每帧重算逻辑。

默认交付单文件 HTML 小部件：顶栏 Play / Next step / 重置与速度滑块，单行状态说明当前在做什么，舞台用 CSS 过渡改位置与颜色（持久 DOM + 切 class，避免整段 innerHTML 重建）。配套说明写在控件外：生活类比 + 2～4 条教学用法（例如先让学生猜再点下一步），并建议可对比的相邻算法。

适用边界

• 一次只做一个主题的小部件；若要「全家桶排序算法」，应分多个 widget 分别生成。
• 数组/结构规模宜控制在 6～10 个元素，便于跟步。
• 输出必须是可交互控件，不是 GIF 式循环；若宿主有 visualize 工具可托管，但设计规范仍以 references 中的 design 体系为准。