Hello, sd!

试一试，可以通过按键 N 播放动画下一小节，通过按键 P 回退到动画的上一小节。

研究背景

在算法竞赛领域，知识点越来越难，越来越抽象。传统教学媒介在呈现多维数据关系、递归回溯等动态知识时很麻烦。可视化教学为此提供了一条新的路径。

本研究旨在设计与实现一种支持深度交互的算法动画引擎，该引擎对竞赛教学场景中高频使用的数据结构进行封装，降低了算法动画的开发复杂度。

研究现状

数字动画

这一流派包括 PPT、Keynote、Synfig Studio、Adobe Animate 和 Blender 等等。它们的主要特点是遵循传统的动画制作范式，将算法实现与动画制作割裂为两个独立的阶段。这种分离式开发模式将会引发一系列显著的问题：

• 在动画调试方面，因涉及多元素协同运动而充满挑战，制作者需逐帧检查运行情况，过程耗时且易遗漏潜在错误；

• 在动画维护方面，由于算法可视化效果基于预先设定的关键帧和时间轴，任何细微修改都可能牵一发而动全身，需重新调整多个关键帧属性，甚至影响后续动画效果，导致调整时间轴极为不便；

• 由于需要让算法逻辑和动画效果紧密贴合，对复杂的算法而言需要投入大量的时间和精力对关键帧进行精细操作，这一过程不仅繁琐，而且对制作者的动画制作技能要求极高。

程序化动画工具

这一流派的设计理念类似于打造一套模块化的工具箱，通过提供一系列可编程组件，允许用户以代码驱动的方式动态生成动画。这种基于代码的动画制作形式，从根本上弥合了算法实现与动画制作之间的鸿沟，有效规避了传统工具中存在的割裂问题。

其中最引人注目的必然是 Manim 和 Movy.js，说来惭愧，作者本人并没有使用过这两个，所以不好评价。不过作者目前的认知上觉得由于其最终生成结果的形态均为静态视频文件。这种设计范式使得动画播放只能以线性方式进行，缺乏动态控制能力，从而无法满足教师在算法教学过程中对演示节奏的精准把控需求。

具体而言，视频文件作为一种单向传播媒介，其播放过程是事先固定的，教师无法根据课堂实际需求而灵活地调整演示进度，例如快速跳转到某个关键步骤、回溯到前一阶段以强化学生理解，或在特定节点暂停以进行详细讲解等等。这种限制与幻灯片的交互性形成了鲜明的对比，后者允许教师通过点击或快捷键实现内容的自由切换与重复展示，从而更好地适应教学节奏与学生反馈。此外，视频文件的线性播放模式也难以支持算法教学中常见的分步演示需求。例如，在讲解递归算法时，教师可能需要反复展示某一递归层级的执行过程，而视频文件只能通过手动拖动进度条实现这一功能，操作繁琐且难以实现精确的控制。

不过好像最近 3B1B 新出的视频展示了 Manim 的交互能力（逃），只能说在作者开始编写 sd 动画框架的时候还没见着。

可视化工具

这一流派包括 p5.js、D3.js、Matplotlib、Plotly、NetworkX 等等。它们的主要问题是，它们的设计初衷并非专门针对高阶算法的可视化需求，而是侧重于基础绘图或数据驱动的视觉呈现，因此在实现复杂算法逻辑展示时，往往需要用户编写大量额外的逻辑代码以完成状态管理、动态更新及交互控制等功能，限制了其在高阶算法可视化场景中的直接适用性。

算法可视化平台

专门的算法可视化平台，诸如 VisuAlgo、Algorithm Visualizer、Turing’s Craft 等等，为该领域提供了更加专业和便捷的解决方案。然而，这些平台在应用过程中也存在一定的局限性。当教师面临复杂的教学需求，或是需要深度定制算法动画时，平台的拓展性不足问题便凸显出来。这可能会限制教师在教学中根据具体教学内容和学生特点进行个性化教学资源的开发，影响教学效果的进一步提升，在一定程度上制约了算法可视化平台在复杂教学场景中的应用。

人工智能动画制作

众所周知人工智能动画不可控，不能确保准确性。这显然与算法教学的场景相悖。