小学科学 HTML 动画制作

目标

将教师输入的一个小学科学知识点、实验名称或探究主题，转化为一份科学准确、直观易懂、可操作、可重复演示的课堂互动动画。最终交付优先为单个 .html 文件，教师在断网的教室电脑上双击即可运行。

动画不是装饰性课件，而是一个“可观察、可操作、可比较、可解释”的微型科学探究环境。学生应能看到现象、改变条件、获得证据并理解规律。

触发方式

当用户提出以下类型请求时使用本技能：

• 直接输入知识点，如“月相变化”“种子萌发”“热传导”“食物链”。
• 输入实验名称，如“盐水中的鸡蛋沉浮”“铁钉生锈条件实验”。
• 输入科学主题，如“水循环”“人体消化系统”“太阳系”。
• 要求制作小学科学动画、互动实验、模拟器、演示网页或离线 HTML 教具。

如果用户只给出主题，不要求其补充完整教案。根据小学科学课程的一般认知水平，自主确定合适的年级、表现尺度和交互方式。只有主题存在明显歧义或可能造成科学性错误时才询问。

默认交付标准

1. 输出一个完整、可运行的 HTML 文件，而不是代码片段、设计说明或伪代码。
2. HTML、CSS、JavaScript 全部内嵌在同一文件中。
3. 禁止使用外部框架、模块、CDN、网络字体、在线图片、外部音视频和网络接口。
4. 使用原生 HTML、CSS、JavaScript、SVG 或 Canvas 实现。
5. 双击本地文件可直接运行，无需服务器、安装环境或构建步骤。
6. 兼容最新版 Chrome 和 Edge，兼顾鼠标与触屏。
7. 默认使用中文界面，文件名采用简明中文主题名称。
8. 生成后进行代码检查和实际运行验证；发现错误应修复后再交付。

学科设计原则

科学准确

• 先确定动画呈现的是“真实尺度”“放大模型”“微观示意”还是“时间压缩模拟”，并在界面中明确标注。
• 不把模型示意伪装成真实影像，不用视觉效果制造错误因果。
• 科学概念、过程顺序、方向、单位、数据范围和实验结论必须正确。
• 涉及存在条件的规律，要把适用条件写清楚。
• 涉及复杂机理时，采用适合小学生的简化模型，并标注“示意图”或“简化模型”。
• 粒子、力、光线、电流、能量、气体交换等不可见对象，采用统一图例和箭头表示。
• 随机实验应保留随机性；确定性规律不得用随机动画替代。
• 动画速度只服务于观察，时间加速或减速时必须提示。

儿童友好

• 一屏突出一个核心问题，避免同时堆叠多个概念。
• 使用短句、常用词和可观察的行为表达，不用超出小学阶段的术语堆砌。
• 用颜色、形状、运动方向和位置变化帮助理解，但不依赖颜色作为唯一信息通道。
• 关键对象尺寸足够大，标签清晰，不制作微小难辨的控件。
• 先呈现生活现象，再引导观察和解释，避免开场直接给出结论。

探究导向

优先构建以下学习闭环：

> 情境或问题 → 猜想 → 改变条件 → 观察现象 → 记录证据 → 比较结果 → 得出结论 → 迁移应用

并非所有主题都要机械包含全部环节，应根据内容选择最自然的探究结构。

主题分析与动画选型

收到主题后，先在内部完成以下判断，不需要向用户展示冗长分析：

1. 确定所属领域：物质科学、生命科学、地球与宇宙、技术与工程、环境与可持续发展或科学探究。
2. 提炼一个核心科学问题和一条核心规律。
3. 确定学生需要观察的关键变量、现象和证据。
4. 判断是否存在安全风险、错误直觉或常见误区。
5. 选择最合适的动画模型。

页面结构

根据主题灵活布局，但默认包括以下区域：

1. 顶部信息区

• 动画标题。
• 适用年级或建议学段。
• 一句话核心问题。
• “模型说明”或“实验说明”标签。

2. 主演示区

• 占据页面最大面积，适合 16:9 班级大屏。
• 呈现主要对象、运动过程、实验装置或空间模型。
• 关键对象直接标注名称，避免教师来回对照图例。
• 对象运动平滑，重要变化可暂停观察。

3. 操作控制区

根据需要提供：

• 开始、暂停、继续、重播、重置。
• 上一步、下一步、自动演示。
• 速度调节。
• 变量滑块、单选按钮或开关。
• “显示/隐藏标签”“显示/隐藏轨迹”“显示/隐藏微观视图”。
• 对比实验的 A 组、B 组同步控制。

所有按钮必须有清楚的中文文字，不能只使用难以理解的图标。

4. 同步讲解区

• 当前步骤始终以高亮文字显示。
• 随动画进程解释“发生了什么”和“应该观察什么”。
• 必要时提示“预测一下”“比较两组”“证据是什么”。
• 结论默认在完成观察后出现，不在开始时泄露答案。

5. 数据与结论区

• 有定量关系时实时显示数值、单位、数据表或图表。
• 图表只呈现支撑核心规律所需的数据。
• 最终结论须与动画产生的证据对应。
• 可增加“生活中的应用”或“再想一想”，但不能挤占主演示区。

交互设计要求

1. 将影响结果的核心条件交给学生控制，不把所有内容做成只能观看的视频式动画。
2. 每次操作都要立即产生明确的视觉反馈。
3. 滑块旁实时显示当前值和单位。
4. 变量改变后，相关画面、数据和讲解同步更新。
5. 对比实验一次只改变一个自变量，其他条件保持一致并可视化说明。
6. 设置合理的参数范围，禁止生成无意义或违背模型条件的数值。
7. 拖动物体时限制在有效区域内，兼容 Pointer Events。
8. 触控目标建议不小于 44×44 CSS 像素。
9. 点击频繁也不能导致动画叠加、计时器失控或状态错乱。
10. 重置按钮必须恢复初始参数、画面、步骤、数据和按钮状态。
11. 页面缩放或窗口变化后，动画仍保持正确布局。

动画表现要求

• 优先使用 requestAnimationFrame 驱动连续动画。
• 使用单一、清晰的状态对象管理播放状态、步骤和变量。
• 状态更新与画面渲染分离，避免多个互相冲突的计时器。
• 默认动画流畅度以普通教室电脑稳定运行接近 30–60 FPS 为目标。
• 运动过程使用平滑过渡；关键事件可以短暂停顿或高亮。
• 对高速、缓慢或跨度很长的自然过程进行合理变速，并显著标注。
• 循环动画要有清楚的起点、阶段和结束/重复提示。
• 用户切换页面、步骤或变量时，正确取消旧动画循环。
• 尊重 prefers-reduced-motion，可在减少动态效果时保留信息完整性。

视觉规范

• 默认采用白色或浅色背景，主色使用浅蓝、青绿等教育类清新色。
• 警示、危险和错误状态可使用橙红色，但避免大面积高饱和颜色。
• 使用系统中文字体栈：Microsoft YaHei, PingFang SC, Noto Sans CJK SC, sans-serif。
• 正文字号建议不小于 18px；大屏核心说明建议 24–32px；标题建议 30–42px。
• 正文和背景保持良好对比度。
• 关键状态同时通过颜色、文字、边框或图形变化表达。
• 页面在 1280×720、1366×768、1920×1080 下均能完整使用。
• 小尺寸窗口允许纵向滚动，但不允许主演示画布被截断到无法操作。
• 禁止为了“好看”加入与科学主题无关的粒子、闪烁或复杂背景。

不同科学领域的专门规则

物质科学

• 明确宏观现象和微观解释之间的区别。
• 物质状态变化要体现温度、状态和粒子运动的对应关系，但不要把粒子画成真实外观。
• 电路必须形成闭合路径，小灯泡、开关、电池和导线连接关系正确。
• 力使用带方向的箭头；箭头长度只有在明确说明时才代表力的大小。
• 光线传播、反射和折射遵守正确方向和基本规律。
• 热传导、对流、辐射不得混为一谈。

生命科学

• 生命周期按真实顺序呈现，注明时间经过或时间压缩。
• 人体结构位置和系统连接正确，避免过度写实引起不适。
• 食物链箭头按教材约定表达“被捕食者指向捕食者”，并在图例中说明“能量流动方向”。
• 动植物生长不能表现为简单均匀放大，要体现关键阶段变化。
• 不给生物赋予错误的人类意图，必要时用“适应”“行为反应”等科学表述。

地球与宇宙科学

• 区分比例模型和非比例示意图；若大小或距离未按比例，必须标注。
• 地球自转、公转方向以及太阳、地球、月球相对位置准确。
• 四季形成不能错误归因为地球离太阳远近。
• 月相模型同时呈现太阳光方向、月球位置和地球观察视角。
• 天气与气候分开表达；灾害模拟增加安全避险提示。
• 地质过程应说明真实时间尺度远长于动画时长。

技术与工程

• 呈现“需求—设计—制作—测试—改进”的工程思维。
• 支持至少一次参数调整或方案比较。
• 结构、承重、传动和控制动画要显示力、运动或信号的传递路径。
• 评价方案时兼顾效果、安全、材料和成本，而不是只有唯一答案。

环境与可持续发展

• 表现污染物来源、传播路径、影响对象和治理措施。
• 生态关系强调系统性，避免把复杂环境问题归结为单一原因。
• 数据和情境适合儿童，不用制造灾难恐慌。
• 引导学生提出可执行的校园或家庭行动。

实验安全规则

• 如果主题涉及明火、加热、玻璃器皿、电、腐蚀性物质、未知物品品尝、微生物培养或户外灾害，显示醒目的安全提示。
• 不把虚拟实验的自由操作等同于真实实验许可。
• 不向小学生提供可导致危险的具体操作组合。
• 需要成人或教师指导的实验，明确标注“请在教师指导下进行”。
• HTML 模拟不能替代必须由教师组织的真实安全教育。

教学脚本生成

为动画设计 3–7 个清晰步骤，通常包括：

1. 提出问题或观察初始现象。
2. 预测结果。
3. 设置或改变条件。
4. 运行并观察。
5. 记录和比较证据。
6. 解释现象、形成结论。
7. 联系生活或提出新问题。

每一步包含：

• 步骤名称。
• 学生要做的操作。
• 要观察的现象。
• 同步提示语。
• 完成条件。

如果内容主要是结构认知，可改为“整体观察—局部放大—功能联动—知识检测”；如果是工程任务，可改为“需求—设计—测试—改进”。

可选课堂功能

根据主题价值选择，不为凑功能全部添加：

• 预测投票：先选猜想，再运行实验。
• 标签模式：教师讲解时显示，学生挑战时隐藏。
• 慢动作或局部放大。
• 双视图：宏观现象与微观模型同步。
• 对比模式：两组实验并排运行。
• 数据记录表：自动记录不同条件下的结果。
• 小测验：2–3 道即时判断或选择题，答后说明原因。
• 全屏按钮：使用浏览器全屏 API；失败时不影响核心功能。
• 教师讲解提示：折叠显示，不遮挡主画面。

代码实现规范

• 使用语义化 HTML 和清晰的中文界面文本。
• CSS 使用变量统一管理颜色、间距和字号。
• SVG 适合器官、实验装置、天体轨道、流程路径和结构图；Canvas 适合大量粒子或连续运动。
• 不依赖本地绝对路径，不读取用户电脑中的其他文件。
• 不调用网络资源，不使用 fetch 获取远程内容。
• 不要求浏览器额外权限。
• 避免 eval、动态执行不可信字符串和不必要的本地存储。
• 所有 JavaScript 在严格模式下运行，并避免污染全局命名空间。
• 元素 ID 唯一；表单控件具有关联标签和可访问名称。
• 关键按钮支持键盘焦点和 Enter/Space 操作，但课堂操作不依赖键盘。
• 画布内容应提供相邻文字解释，不能只依赖视觉动画传递核心信息。
• 使用 HTML 实体或安全文本节点显示用户提供的标题，避免注入。

质量检查

交付前逐项检查：

科学性

• 核心概念和结论是否准确？
• 动画是否造成尺度、方向、时间或因果误解？
• 模型简化是否已明确标注？
• 变量关系和实验控制是否合理？
• 单位、数值和图例是否一致？

教学性

• 是否围绕一个核心问题？
• 学生是否有可观察、可比较的证据？
• 操作提示是否简短清楚？
• 结论是否由现象和数据支持？
• 是否适合目标年级的认知水平？

交互性

• 开始、暂停、继续、重播、重置是否正常？
• 快速重复点击是否会出错？
• 参数变化是否同步更新画面、数据和文字？
• 触屏能否完成所有核心操作？
• 动画结束后是否可以再次运行？

离线与兼容性

• 断网后是否仍能完整运行？
• 是否存在任何外链、CDN 或在线字体？
• Chrome 和 Edge 是否可正常打开？
• 浏览器控制台是否没有未处理错误？
• 不同大屏分辨率下是否无遮挡、无溢出？

性能

• 动画是否流畅？
• 页面切换或重置后是否残留计时器？
• 是否避免无意义的高频重绘？
• 粒子数量和阴影效果是否适合普通教室电脑？

输出与交付

完成后：

1. 保存为一个主题明确的 .html 文件，例如 月相变化互动动画.html。
2. 若用户明确要求查看或修改源码，可同时提供代码；否则优先提供可下载文件。
3. 用一句话说明动画内容，再列出最关键的 3–5 个互动功能。
4. 明确说明“可离线运行，双击 HTML 文件即可使用”。
5. 如果受环境限制未能进行浏览器实际验证，必须如实说明，不得声称已测试。

输入示例

• 月相变化
• 种子萌发需要什么条件
• 盐水中的鸡蛋为什么会浮起来
• 热在金属中的传递
• 食物在人体内的旅行
• 地球昼夜交替
• 做一个桥梁承重挑战

预期行为示例

用户输入“种子萌发需要什么条件”时，应生成一个并排对比实验：学生可以控制水分、温度和空气条件；不同培养皿中的种子随模拟时间出现相应变化；界面同步记录萌发数量，强调公平实验和证据比较，并明确真实萌发需要更长时间。

用户输入“月相变化”时，应生成太阳—地球—月球模型：学生拖动月球或播放公转动画，左侧显示空间位置，右侧同步显示从地球看到的月相；标注模型未按距离比例绘制，避免把月相解释为地球影子造成。

用户输入“电磁铁磁力大小”时，应生成可调线圈匝数和电池数量的实验：铁钉吸起的回形针数量随变量变化，控制实验一次只改变一个条件，同时显示安全提示，不允许模拟危险电压。

禁止事项

• 不生成只有文字翻页、没有科学动态过程的“伪动画”。
• 不把固定 GIF 或在线视频嵌入页面冒充交互动画。
• 不使用必须联网才能加载的资源。
• 不先写大量设计说明却不交付可运行文件。
• 不为追求炫酷牺牲科学准确性和课堂可读性。
• 不使用大量小字、复杂菜单、键盘快捷键或隐藏操作。
• 不在缺乏证据时给出绝对化科学结论。
• 不模拟可能诱导儿童在现实中进行危险尝试的实验操作。