AI生成数学教学动画的入门指南

前言

本文针对编程0基础的数学老师进行介绍，主要从动画生成、保存动画代码、生成定积分动画三个方面展开。

准备工作

本文内容基于腾讯元宝网页版编写，为了方便重现本文相关效果，建议使用腾讯元宝网页版，注册账号，登录，并切换DeepSeek，勾选R1-深度搜索、联网搜索。

一、动画生成

原理简介

目前AI能很好的生成文本内容，同时网页代码（后续简称html）也是文本形式，而网页可以呈现各种动画效果，所以我们可以让AI将动画的效果，以html代码的形式呈现，然后我们再去运行这份代码即可（代码文件保存、运行放在第三点介绍）。

小试牛刀

明白原理后，那么我们就可以用“请帮我生成XX动画，并以html代码形式给我”来请求AI帮助了，比如我们可以输入：

请帮我生成一个时钟动画，并以html代码形式给我。

经过AI的思考和生成，我们找到html代码部分的上方，在右上角可以看见这个有两个按钮：运行和复制。点击运行，接着就可以看见时钟动画了：

（严谨一下：以上图片仅供参考，具体以自己的生成结果为准）

稍作改进

目前为止，我们生成了第一份动画，虽然和数学无关，甚至也不美观，但这是0到1的一步。接下来我们可以提出更详细的描述指令，让AI重新生成，也可以让AI在现有的基础上进行修改。
比如我连着输入下面的内容：

调整上述时钟动画代码，美化表盘，然后将所有代码以html形式给我。

调整上述时钟动画代码，在下方增加显示时间区域，所有代码以html形式给我。

得到了更美观（存疑）和数字时间显示的功能，见下图。

小技巧：让AI改代码，它可能就只是局部修改，然后只给出修改部分的代码（AI也想偷懒），为了方便我们操作，那肯定不能让它偷懒，所以我在上述两个指令都加上了“然后将所有代码以html形式给我”。

常见问题：点击“运行”后没有动画效果

看不见预期的效果，很大概率是AI生成的代码出错了，最简单的办法就是直接告诉AI，比如我会输入：

上述代码运行报错，请修改正确后，再全部重新发给我。

小结

让AI生成动画，就是把具体的需求告诉AI即可，一次不满意，就继续调整指令，直到生成出满意的为止。

二、保存动画代码

有了动画，但是还在AI网页版本上，不方便我们演示，接下来我们一步一步让AI生成的动画代码，变成我们的本地文件。

第一步：复制

这步简单，就和之前运行代码一样，在AI生成的代码右上方点击“复制”按钮。

第二步：新建文本文档

在自己的电脑里新建一个文本文档，

注意，上图中，文件名的末尾有“txt”三个字母，如果你新建的文件没有这三个字母，建议
1、确定自己电脑的操作系统，比如我的是“Win11”。
2、利用搜索引擎或AI，搜索当前操作系统如何显示文件扩展名，比如我的可以用“Win11如何显示文件扩展名”进行搜索。
确保能看见后面的“txt”三个字母后，再继续下一步。

第三步：粘贴代码、保存

打开刚新建的文本文档，将复制的代码粘贴进行，保存，并关闭文件。

第四步：修改文件扩展名

先看下第一步中，我新建的文本文档的文件名为：“新建 文本文档 (2).txt”，我们简单的认为它由三个部分组成，分别是：“新建 文本文档 (2)”、“.”、“txt”。
其中：
第一部分随便修改。
第二部分的“.”保持不动。
第三部分的“txt”则修改成“html”。
此时可以看见文件的图标已经发生改变了。
接着再打开，就可以在浏览器中看见刚才的动画效果了。

常见问题：

图标没有变化

第四步中，修改了txt为html，文件的图标没有变化，那么检查第二步是否完成好。

图标已经变化，但点击还是以为文本文档打开

右键点击文件，选择“打开方式”，然后选择自己电脑上的浏览器即可。

三、生成定积分动画

此处采用今天何教授的讲座中，展示的指令进行操作，指令如下：

# Role
Web动画开发专家:专注于使用HTML/CSS/JavaScript开发针对数学相关知识学习的可视化演示程序的开发，基于程序的可视化演示，能够让学生直观地理解和掌握数学概念、理论、方法等内容,
## Task
1.开发交互式、可视化演示的HTML前端页面，能够帮助用户理解“定积分是在一个区间上有定义的一元实函数的黎曼和的极限"。
2.实现以下核心功能:
分步执行控制(播放/暂停/单步)
实时显示积分区域变化及状态变化过程;
用户可以选择不同的积分函数进行演示(至少包括5个函数);
积分区间会随着选择函数自动适配区间取值范围:用户可以控制积分
区间，并实时显示变化;
用户可以控制分割数;
用户可以选择不同的积分计算方法(矩形法/梯形法)
3.给出执行过程的文字解读,
## Goal
帮助学生直观理解定积分的概念和计算方法。
创建具有以下特性的演示工具:
教学性:清晰展示定积分的含义及计算逻辑
交互性:允许用户控制执行节奏;
直观性:通过颜色/动画增强理解，
可扩展性:适应不同积分函数的变化;
完整性:动画演示与文字说明。
## Output
完整的HTML/CSS/JavaScript代码
交互式的演示页面;:
包含定积分概念和计算过程文字解读的文档,
动画效果的增强(颜色变化/动画效果)。
交互性的增强(用户可以通过拖动滑块改变相应的参数值)。
用户可以控制动画演示区域的缩放比例(放大/缩小)，要确保每个方
向都能够按比例缩放，
确保显示页面能够自动适应不同的屏幕尺寸和分辨率
html
<!--完整的HTML文件包含:-->
1.可视化区域(带动画效果的图形化展示);
2.控制区域(播放/暂停/单步/重置按钮);
3.解说区域(实时显示当前执行步骤的文字解释)。

AI经过思考后，给出的代码经过运行，没有反应，所以参考前面内容，我继续输入：

上述代码运行报错，请修改正确后，再全部重新发给我。

接着执行保存代码的步骤，打开，最终效果如下：

展望

何教授的定积分动画指令中，增加了Role、Output等标签，具体的使用，暂时没有找到权威的说明，所以这部分目前仅是拿来主义，直接照抄。但是从字面上来看，这部分标签都非常有用，带确定具体使用后，再展开介绍。
最后我是一个会一点编程、上一点数学课的老师，有兴趣可以一起交流。