小学数学 HTML 动画制作
目标
把教师输入的一个小学数学知识点，转化为一个教学目标明确、数学表达准确、动画直观、操作简单、课堂体验良好的 HTML 互动动画。
默认交付一个完整的 .html 文件。教师下载后无需安装软件或启动服务器，断开网络时也能直接双击打开使用。
典型触发方式
- “制作一个分数的初步认识动画。”
- “长方形面积公式推导。”
- “三角形内角和。”
- “用动画演示退位减法。”
- “设计一个圆柱体积公式互动实验。”
- 用户只输入知识点名称，如“异分母分数加法”。
当用户只提供知识点时，直接推断合理的年级、教学重点、动画模型和交互方式，不因缺少非关键参数而停下来追问。
只有下列信息会实质改变教学结果且无法可靠推断时，才询问一个简短问题：
- 同一名称对应明显不同的学段难度；
- 用户要求严格匹配某个特定教材版本，但未说明版本；
- 用户要求修改已有动画，但未提供原文件；
- 用户提出的数学表述存在明显歧义或错误。
输入理解
优先提取以下信息；没有提供的项目按默认值处理。
| 项目 | 默认处理 |
|---|---|
| 知识点 | 必需；从用户原话识别 |
| 年级 | 根据常见小学数学教学进度推断 |
| 教材版本 | 不绑定版本，采用通行课程内容 |
| 课型 | 新授课中的概念形成或算理探究 |
| 使用场景 | 班级大屏演示，同时兼顾学生自主操作 |
| 屏幕比例 | 16:9 优先，自适应普通电脑和平板 |
| 风格 | 蓝白或绿白、清新、低饱和、教育类 |
| 操作方式 | 鼠标点击、拖动、滑块和触屏 |
| 文件形式 | 单个 HTML 文件 |
| 网络条件 | 完全离线 |
不得把推断出的教材版本、年级或公式说成用户明确提供的信息。必要时可在页面说明中使用“适用年级建议”。
工作流程
1. 建立知识点教学模型
编码前先在内部完成以下分析：
- 明确核心概念或数学关系。
- 确定学生需要看见的变化过程。
- 找出本知识点最常见的错误认识。
- 选择能够解释算理的表征，不只展示答案。
- 把教学过程压缩为 3—6 个清晰步骤。
- 为每一步确定画面变化、操作动作和同步讲解。
动画的首要任务是帮助学生理解数学关系。装饰性运动不得干扰观察，不能用热闹效果代替算理呈现。
2. 选择合适的可视化模型
根据知识点选择最能揭示本质的模型，可组合使用。
| 知识类型 | 优先模型 |
|---|---|
| 数的认识 | 实物计数、点阵、小棒、计数器、数位表、数轴 |
| 整数加减 | 小棒捆扎、计数器拨珠、数轴跳跃、竖式同步 |
| 整数乘除 | 等量分组、阵列、面积模型、平均分、包含除 |
| 小数 | 十进制方格、数位表、数轴、单位换算 |
| 分数 | 圆形或矩形分割、纸条、数轴、面积模型 |
| 百分数 | 百格图、进度条、扇形、生活数量关系 |
| 比和比例 | 成对数量条、比例表、坐标图像、缩放模型 |
| 方程 | 天平、等量线段、动态等式 |
| 周长与面积 | 描边、铺格、剪拼、等积变换 |
| 角 | 可拖动射线、量角器、旋转扫过区域 |
| 平移旋转对称 | 方格纸、轨迹、对称轴、控制点 |
| 立体图形 | 三视图、展开与折叠、切割、注水或填充 |
| 统计 | 数据录入、统计表到统计图的动态生成 |
| 概率 | 可重复的抛硬币、摸球、转盘模拟实验 |
| 行程和工程 | 运动轨迹、时间轴、进度条、线段图 |
| 数学广角 | 可操作实物、枚举、树状分支、逐步推理 |
若存在多种表征，优先安排“具体实物 → 图形模型 → 数学符号”的过渡。
3. 设计课堂交互
每个动画至少包含一种能改变数学状态的有效交互，不能只有自动播放。
可使用：
- 开始、暂停、继续、上一步、下一步、重置；
- 拖动点、图形、数轴标记或量角器；
- 滑块调节数量、长度、角度、速度或分割份数；
- 点击添加、减少、分组、涂色、切割或拼合；
- 参数输入与即时结果更新；
- “显示提示”“验证答案”“重新尝试”；
- 自动演示与手动探究模式切换。
交互必须符合数学约束。例如：
- 分母不得为 0；
- 余数必须小于除数；
- 三角形边长必须满足三边关系；
- 概率实验的频数与总次数同步；
- 量角器读数与射线方向一致；
- 图形拖动不能破坏题设中应保持的平行、垂直或等长关系。
所有操作均应支持鼠标和触屏，不得把键盘快捷键作为必要操作。
4. 组织页面结构
页面默认采用适合 16:9 大屏的单页布局，包括：
- 顶部标题区：知识点名称、适用年级建议、核心问题。
- 主演示区：占据最大空间，呈现动画和可操作对象。
- 控制区：集中放置按钮、滑块和参数，不遮挡动画。
- 步骤说明区：当前步骤高亮，同步解释“正在做什么、为什么”。
- 数学表达区：公式、算式或结论随动画实时更新。
- 观察提示区：提出一个适合课堂追问的问题。
- 状态反馈区：成功、错误、边界值和操作提示。
信息较多时使用标签页或分阶段呈现，避免把所有文字一次堆在屏幕上。
5. 编写单文件 HTML
把 HTML、CSS、JavaScript 全部写入一个文件。遵守以下硬性要求：
- 仅使用原生 HTML、CSS 和 JavaScript；
- 禁止外部框架、库、CDN、在线字体和网络 API；
- 禁止依赖外部图片、音频、视频或其他本地文件；
- 图形优先使用内联 SVG、Canvas 或 CSS 绘制；
- 页面通过
file://方式直接打开时必须正常工作； - 不使用需要 HTTP 服务器才能运行的模块加载方式；
- 不读取或写入用户隐私数据；
- 不使用弹窗广告、联网统计或外部跳转；
- 兼容最新版 Chrome 和 Edge；
- 文件保存为 UTF-8，中文不得乱码。
简单几何和需要拖动控制点的内容优先使用 SVG；大量粒子、连续绘制或随机模拟可使用 Canvas；普通布局和状态变化使用 HTML/CSS。
6. 保证课堂视觉体验
- 使用系统中文字体栈：
Microsoft YaHei、PingFang SC、Noto Sans CJK SC、sans-serif； - 背景以白色或极浅色为主，主色使用浅蓝、青绿等低饱和颜色；
- 正确、提示、警示状态的颜色要清晰区分，但不能只依赖颜色传达意义；
- 正文建议不小于 16px，大屏关键文字建议 20—28px；
- 按钮触控区域建议不小于 44×44px；
- 数字、符号、刻度和图形边界必须清晰；
- 动画速度适合教师讲解，提供暂停或分步控制；
- 避免闪烁、快速抖动、强烈渐变和无意义的循环动画；
- 使用
requestAnimationFrame驱动连续动画； - 尊重
prefers-reduced-motion，减少非必要运动； - 页面缩放到 125% 或 150% 时仍应可操作；
- 小屏幕允许上下排列，大屏幕优先左右分区。
7. 同步教学说明
动画运行时，说明文字必须同步变化。每一步尽量包括：
- 操作：画面正在发生什么；
- 观察：学生应该关注哪个数量或图形变化；
- 解释：这一变化说明什么数学道理；
- 表达：对应的算式、公式或结论。
示例：
> 第2步：把10根散开的小棒捆成1捆。观察个位减少10、十位增加1。这说明“满十进一”，竖式中向十位进1。
避免只显示“第一步、第二步”而没有教学含义。
教学设计要求
概念准确
- 数学术语、符号、单位和公式必须准确；
- 区分周长与面积、表面积与体积、比与比值、概率与频率等易混概念；
- 公式推导必须体现成立条件；
- 使用等号时，两边必须保持相等；
- 图示比例可以服务教学，但不得造成明显错误暗示；不按比例绘制时应标注。
突出算理
运算动画不能只模拟计算器。必须展示关键算理，例如：
- 进位是“满十向前一位进1”；
- 退位是“从前一位借1当十”；
- 分数加法先统一分数单位；
- 小数乘法先按整数计算，再依据计数单位确定小数点；
- 面积公式来自铺格、剪拼或等积转化；
- 圆柱与圆锥体积关系来自等底等高实验。
处理易错点
页面应以提示、对比或可尝试操作呈现至少一个典型易错点。反馈说明错误原因，不羞辱、不简单显示“错了”。
形成课堂闭环
一个完整动画建议形成以下体验：
- 提出问题；
- 操作或观察；
- 发现规律；
- 建立数学表达；
- 进行一次验证或迁移应用。
动画状态管理
把状态与画面渲染分开，避免多个事件直接修改互相冲突的样式。
建议维护一个状态对象，至少包含：
- 当前步骤；
- 是否播放；
- 当前参数；
- 用户操作结果；
- 动画进度；
- 提示或错误状态。
所有状态变化后，通过统一的 render() 或等价机制更新图形、公式、说明和按钮状态。重置功能必须恢复初始参数、步骤、计时器和动画对象。
连续动画在暂停、重置、切换步骤或页面隐藏时应停止，避免重复创建计时器和动画循环。
可访问性与操作安全
- 使用语义化按钮，不用只有图标且无说明的可点击元素；
- 表单控件必须有可见标签；
- 当前步骤和反馈使用文字同步说明；
- 保持清晰的焦点样式；
- 关键文本与背景保持足够对比度；
- SVG 交互对象提供可理解的标签或辅助说明；
- 拖动不是完成任务的唯一途径时，提供点击按钮或滑块作为替代；
- 防止连续快速点击导致状态错乱；
- 对超出范围、空值和非法输入进行即时处理。
输出规则
完成后向用户交付：
- 一个以知识点命名的
.html文件； - 一段简短说明，包括动画呈现的核心内容和主要操作；
- 明确说明文件可离线双击运行；
- 若用户要求修改，则在原有目标范围内修改并重新验证。
除非用户明确要求，否则不要把大段完整源码直接粘贴到聊天正文中；优先创建可下载文件。
文件名应简短、明确、避免特殊符号，例如：
分数的初步认识.html三角形内角和.html长方形面积公式推导.html
交付前检查
交付前必须实际检查成品，而不是仅凭代码推测。
文件与离线检查
- [ ] 只有一个 HTML 文件，或用户明确同意多文件结构；
- [ ] 搜索并清除所有
http://、https://、CDN 和外部资源引用； - [ ] 直接通过本地文件方式打开后可以运行；
- [ ] 控制台没有未处理错误；
- [ ] 刷新页面后初始状态正确。
数学检查
- [ ] 术语、公式、符号和单位准确；
- [ ] 至少测试一个普通值和两个边界值；
- [ ] 参数改变后图形、数字、算式和说明同步；
- [ ] 随机实验不会产生不可能的结果；
- [ ] 公式推导没有跳过关键逻辑。
交互检查
- [ ] 开始、暂停、上一步、下一步和重置按实际设计正常工作；
- [ ] 连续点击不会启动重复计时器；
- [ ] 拖动、滑块和参数输入均能更新画面；
- [ ] 鼠标和触屏事件均可使用；
- [ ] 非法输入有友好反馈。
视觉检查
- [ ] 16:9大屏中关键内容无需滚动即可看到；
- [ ] 1366×768、1920×1080和常见平板宽度下无明显遮挡；
- [ ] 文字、刻度和公式清晰；
- [ ] 控件不遮挡动画主体；
- [ ] 动画速度适合课堂观察；
- [ ] 当前步骤有明显但不刺眼的高亮。
发现问题时先修复再交付。不得把未验证的页面描述为“已完全可用”。
知识点适配示例
“20以内退位减法”
- 使用小棒或计数器表现“借1当10”；
- 同步显示实物、算式和竖式；
- 允许调整被减数和减数；
- 高亮个位不够减、向十位借1、完成相减三个阶段；
- 易错对比：借位后十位忘记减1。
“分数的基本性质”
- 使用等大的长方形纸条；
- 滑块同时改变分子和分母的倍数；
- 涂色面积保持不变；
- 同步显示分数和等式；
- 明确“分子、分母同时乘或除以同一个不为0的数”。
“三角形内角和”
- 三个顶点可拖动，同时保持有效三角形；
- 动态显示三个角的度数及总和；
- 提供撕角拼成平角的分步演示；
- 提供不同形状三角形的验证；
- 说明测量值可能因屏幕取整出现微小误差。
“圆柱体积”
- 提供底面半径和高的滑块；
- 用分层填充表现“底面积×高”；
- 同步更新圆柱图形、参数和公式；
- 可与同底等高圆锥进行注水实验对比；
- 半径变化时强调底面积按半径平方变化。
边界
- 本技能面向小学数学课堂动画，不自动扩展为整套课程网站或资源库；用户明确提出时再扩展。
- 不为追求视觉效果引入联网依赖或大型框架。
- 不把动画替代为静态海报、视频或仅有文字的课件。
- 不编造教材页码、课程标准原文或特定版本的教学顺序。
- 不默认收集、上传或保存学生作答数据。
- 若用户要求接入账号、云端数据或在线服务，应先说明这会破坏“完全离线”的默认目标，并按用户选择执行。
完成标准
只有同时满足以下条件，任务才算完成：
- 数学内容准确，动画揭示了概念或算理；
- 教师只需打开文件即可演示；
- 学生可以通过有效交互观察数量关系；
- 当前步骤、图形变化和数学表达同步；
- 页面适合班级大屏，也能在平板上操作；
- 完全离线，无外部依赖；
- 已完成数学、交互、视觉和本地运行检查；
- 已向用户提供可下载的 HTML 成品。
