小学英语 HTML 动画制作

一、Skill 目标

把教师输入的一个小学英语知识点或教学场景，转化为一个可直接运行的高质量 HTML 教学动画。

生成结果必须：

• 符合小学英语学科规律和小学生认知特点；
• 适合教室电脑与班级大屏展示；
• 支持教师演示和学生互动；
• 断网时可直接双击打开；
• 优先输出一个完整的 .html 文件；
• 使用原生 HTML、CSS、JavaScript，不依赖外部框架、CDN、在线字体、远程图片或云端接口；
• 在 Chrome 和 Edge 最新版中正常运行；
• 操作入口清晰，不依赖键盘快捷键。

二、何时使用

当用户提出以下需求时使用本 Skill：

• “把自然拼读 a_e 做成 HTML 动画。”
• “制作一个 there is/there are 教学动画。”
• “制作一个在餐厅点餐的英语情境动画。”
• “用动画讲解一般过去时。”
• “制作小学英语四季与天气互动课件。”
• “把绘本故事做成可交互动画。”
• “生成一个英语单词闯关小游戏。”
• “制作适合班级大屏的小学英语动画。”

如果用户只提供一个知识点或场景，不要求其补充复杂参数。根据内容自行推定合理学段、学习目标、语言难度和动画形式，并直接生成成品。仅当知识点存在明显歧义、必须依赖用户未提供的课文原文，或用户指定教材但没有提供教材内容时，才询问一个最关键的问题。

三、输入识别

从用户输入中提取或合理推定：

如果用户提供了年级、教材版本、课时、词汇表、句型、图片、语篇或教学目标，应优先遵循这些信息。

四、先判断知识类型

生成前先在内部完成分类。不要把分类推理过程大段展示给用户。

1. 字母与书写类

包括字母认读、大小写匹配、字母顺序、四线三格和规范书写。

优先使用：

• SVG 笔画轨迹；
• 四线三格；
• 逐笔播放；
• 大小写配对；
• 描红或沿轨迹跟写；
• 易混字母并列对比。

必须呈现书写方向、起笔位置、笔画先后和字母占格。不可只让字母整体淡入。

2. 语音与自然拼读类

包括音素意识、字母音、CVC 拼读、静音 e、字母组合、音节、重音、连读和语调。

优先使用：

• 字母或音素滑轨；
• 音素分解与合成；
• 字母组合高亮；
• 口型提示或简洁发音位置示意；
• 音波、节拍和语调曲线；
• 词族变换；
• 最小对立辨音；
• 点击发音和慢速分段播放。

必须保证字母、音素、声音和画面变化同步。音标只在适合的年级或用户明确需要时使用，不能让音标喧宾夺主。

3. 主题词汇类

包括人物、家庭、学校、食物、动物、天气、交通、节日等主题词汇。

优先使用：

• 生活化场景图；
• 点击热点认词；
• 图—词—音同步；
• 拖拽分类；
• 听音选图；
• 拼词；
• 情境任务和词汇闯关。

单词不能脱离情境机械闪现。每个核心单词至少经历“看见含义—听见发音—识别拼写—放入短句”中的三个环节。

4. 语法与句型类

包括名词单复数、代词、介词、时态、动词变化、比较级、疑问句和否定句等。

优先使用：

• 句子积木；
• 成分换位；
• 字母或词尾变形；
• 时间轴；
• 数量或人物变化与句式联动；
• 正误对比；
• 规则归纳卡；
• 参数实时调节。

语法必须从意义和情境进入，再呈现形式规律。不能以长篇语法定义作为动画主体。

5. 情境交际类

包括问候、购物、点餐、问路、看病、邀请、请求、建议、电话交流和节日祝福等。

优先使用：

• 角色动画；
• 对话气泡；
• 多分支选择；
• 信息差任务；
• 可点击物品或地图；
• 角色扮演提示；
• 即时反馈和不同结局。

对话必须自然、简短、符合小学生语言水平。每轮对话一般不超过两句，每句尽量不超过 12 个英文单词，必要时按意群换行。

6. 阅读与绘本类

包括对话、短文、故事、海报、菜单、时刻表和绘本阅读。

优先使用：

• 分镜或翻页；
• 角色动作；
• 字幕与声音同步；
• 阅读前预测；
• 关键词高亮；
• 情节排序；
• 信息提取；
• 因果链；
• 复述支架。

保留语篇整体意义，避免把文本拆成互不关联的单词练习。若用户未提供受版权保护的原文，不要擅自复现整篇教材或绘本，应创作与知识目标相符的原创短语篇。

7. 写作与综合表达类

包括连词成句、看图写话、人物介绍、日记、邀请卡、明信片和短文写作。

优先使用：

• 词卡排序；
• 句型骨架；
• 图片线索；
• 信息卡生成；
• 故事板；
• 分步写作；
• 拼写、大小写和标点检查；
• 范例与自主表达切换。

动画应提供支架，但不能替学生自动完成全部表达。

8. 文化与跨文化类

包括中外节日、生活习惯、礼仪、地标和文化比较。

优先使用：

• 地图探索；
• 时间线；
• 双场景对比；
• 节日互动场景；
• 文化行为判断；
• “用英语讲中国文化”任务。

内容应准确、尊重差异，避免标签化和绝对化描述。

五、教学设计原则

1. 以语言运用为中心

动画不是装饰。每个视觉变化都要服务于“理解语言、发现规律、使用语言”之一。至少安排一次让学生作出语言选择、完成表达或解决情境任务的互动。

2. 遵循英语学习路径

默认采用以下认知路径，但可根据知识类型调整：

1. 情境感知；
2. 听音或观察；
3. 发现词形、语音或结构规律；
4. 跟读、匹配、排序或操练；
5. 在新情境中运用；
6. 小结与检测。

3. 控制认知负荷

• 一个画面只突出一个主要信息；
• 当前讲解对象使用高亮色，非关键元素降低对比度；
• 说明文字短句化；
• 动画速度适中，并允许暂停与重播；
• 低年级少文字、多图形和声音；
• 高年级增加规则归纳、语篇和任务；
• 不使用无教学意义的持续闪烁、快速旋转和密集粒子效果。

4. 音形义同步

呈现英语单词或句子时，尽可能同步：

• 含义场景或图像；
• 英文拼写；
• 发音；
• 当前发音部分的视觉高亮；
• 在短句或对话中的使用。

5. 先理解后归纳

对于语法内容，先通过人物、物品、动作、数量或时间变化建立意义，再引导学生观察句式变化，最后出现简洁规则卡。

6. 可检测的学习目标

目标使用可观察行为，如“能听辨”“能认读”“能根据图片说出”“能选择”“能排序”“能运用句型完成对话”，避免只写“了解”“掌握”。

六、自动设计流程

接到知识点或场景后，依次完成以下工作：

Step 1：确定教学边界

确定建议年级、核心目标、核心词汇、核心句型和课堂使用时长。避免把一个知识点扩张为整单元课程。

Step 2：选择动画范式

从以下范式中选择一种主范式，可搭配一种辅助范式：

Step 3：设计教学脚本

默认设计 4—6 个步骤：

1. 情境导入；
2. 核心演示；
3. 规律发现；
4. 互动练习；
5. 情境运用；
6. 课堂小结。

页面必须显示“当前步骤”，并随动画进程同步高亮。教师可通过“上一步”“下一步”自由控制，自动播放不能成为唯一方式。

Step 4：生成完整 HTML

将 HTML、CSS、JavaScript 集成在同一个文件中。除非用户明确要求多文件项目，否则不拆分文件。

Step 5：运行检查

在交付前检查：

• 文件能够直接打开；
• 控制台无 JavaScript 错误；
• 所有按钮有效；
• 重置后状态恢复正确；
• 自动播放、暂停、上一步、下一步逻辑正确；
• 拖拽同时兼容鼠标和触屏；
• 窗口缩放后无明显遮挡或溢出；
• 断网后核心内容仍完整可用；
• 页面中没有外部请求；
• 英文拼写、语法和示例准确；
• 中文说明简洁、适合小学生理解。

若环境允许，使用浏览器实际打开并完成一次核心交互流程；不能实际运行时，至少进行静态代码检查和状态逻辑审查。

七、页面结构要求

1. 顶部信息区

包含：

• 动画标题；
• 建议年级；
• 学习目标按钮或简短目标；
• 全屏按钮；
• 声音开关；
• 教师模式开关。

2. 主演示区

• 占页面主要空间；
• 以动画场景、人物、物品、时间轴、词卡或句子结构为中心；
• 16:9 教室大屏优先；
• 核心文字在远距离仍可辨认；
• 不让说明面板遮住主要动画。

3. 步骤与讲解区

• 显示步骤编号与进度；
• 当前步骤使用明显高亮；
• 同步呈现一句简洁的教学提示；
• 英语例句和中文提示层级分明；
• 可由教师隐藏中文提示。

4. 控制区

至少包含：

• 上一步；
• 播放/暂停；
• 下一步；
• 重播当前步骤；
• 重置；
• 全屏。

根据内容增加：

• 发音按钮；
• 慢速/正常速度；
• 动画速度滑块；
• 参数调节滑块；
• 显示/隐藏答案；
• 切换例词或场景。

5. 互动练习区

至少包含一种有效互动：

• 点击选择；
• 拖拽匹配；
• 排序；
• 分类；
• 路线选择；
• 对话分支；
• 参数调节；
• 拼词或组句。

反馈应说明正确原因或提供线索，不只显示红叉。错误后允许立即重试。

八、大屏视觉规范

1. 画布与布局

• 优先适配 16:9，推荐以 1920×1080 的视觉比例设计；
• 同时响应 1366×768、1280×720 和常见平板横屏；
• 使用 CSS Grid 或 Flexbox；
• 主内容区域避免固定像素尺寸导致溢出；
• 页面默认不出现横向滚动条；
• 关键按钮固定在易触达区域。

2. 字号

• 主标题建议使用 clamp(28px, 3vw, 52px)；
• 核心英语单词建议使用 clamp(36px, 6vw, 88px)；
• 英语例句建议使用 clamp(28px, 3.5vw, 56px)；
• 中文提示建议使用 clamp(18px, 2vw, 32px)；
• 按钮文字不得小于 18px；
• 字母、音素和词尾变化必须足够醒目。

3. 配色

• 使用清新教育风格；
• 推荐蓝白、青绿白或柔和暖色辅助；
• 背景以白色或浅色为主；
• 主色用于导航和控制；
• 高亮色用于当前字母、音素、词尾或句子成分；
• 正确反馈使用柔和绿色，错误反馈使用柔和橙红色；
• 不以颜色作为唯一信息编码，同时配合文字、图标或形状。

4. 字体

使用系统字体栈，例如：

font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;

不得调用在线字体。

5. 动效

• 使用 transform 和 opacity 优先实现动画；
• 常规过渡时长 300—800ms；
• 教学过程动画可为 1—3 秒；
• 运动轨迹应清楚，不能快到无法观察；
• 自动播放必须可暂停；
• 支持 prefers-reduced-motion，降低非必要运动；
• 避免强闪烁，以降低视觉不适风险。

九、图形、角色和素材规范

• 优先使用 CSS、SVG、Canvas 绘制原创图形；
• 简单人物可用 SVG 或 CSS 角色，表情和动作要清晰；
• 图标使用内嵌 SVG，不调用在线图标库；
• 不使用网络图片占位；
• 必须使用图片时，将用户提供且有权使用的素材嵌入文件；
• 不擅自嵌入受版权保护的教材插图、绘本页面、卡通角色或品牌形象；
• 图片不是核心时，宁可使用风格统一的简洁矢量图，也不要用不可用的空链接。

十、声音与离线策略

1. 默认策略

如果没有可嵌入的真人录音：

• 不调用在线语音服务；
• 可使用浏览器 speechSynthesis 作为可选朗读功能；
• 页面应明确：系统语音的音色与可用性取决于本机；
• 即使语音不可用，动画、文字和全部核心交互仍须正常工作。

2. 用户提供音频时

• 优先将短音频转为 Base64 Data URI 内嵌；
• 为每段音频提供播放和重播；
• 播放时同步高亮对应字母、音素、单词或句子；
• 不让多个音频重叠播放；
• 页面重置时停止全部音频。

3. 语音教学准确性

• 例词与目标音应匹配；
• 区分字母名称和字母音；
• 自然拼读过程先分音，再合音；
• 不把不规则词强行套用规则；
• 如使用英式或美式发音，应保持示例内部一致；用户未指定时可采用一种主流发音并避免强调地区差异。

十一、交互技术规范

• 所有按钮必须是可聚焦的 <button> 元素；
• 为重要控件提供清晰的可访问名称；
• 拖拽优先使用 Pointer Events，同时支持鼠标和触屏；
• 拖拽任务应提供点击选择的替代方式；
• 点击热区建议不小于 44×44 CSS 像素，大屏主按钮建议更大；
• 通过统一状态对象管理当前步骤、播放状态、答案和参数；
• 重置函数必须恢复界面、计分、角色位置、计时器和音频；
• 切换步骤前清除上一步骤的定时器，防止动画串步；
• 避免使用 alert() 打断课堂流程，使用页面内反馈卡；
• 不要求学生输入大量键盘文字；
• 不把悬停作为唯一触发方式。

十二、推荐代码结构

单文件中保持清晰分区：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>知识点名称｜小学英语互动动画</title>
  <style>
    /* 1. 主题变量与重置 */
    /* 2. 大屏响应式布局 */
    /* 3. 场景、角色、词卡与控制组件 */
    /* 4. 动画关键帧 */
    /* 5. 减少动态效果与打印兼容 */
  </style>
</head>
<body>
  <main class="app">
    <header><!-- 标题与全局工具 --></header>
    <section class="stage"><!-- 主动画 --></section>
    <aside class="instruction"><!-- 当前步骤和提示 --></aside>
    <section class="practice"><!-- 互动练习 --></section>
    <footer class="controls"><!-- 教学控制 --></footer>
  </main>
  <script>
    // 1. 教学内容数据
    // 2. 单一状态对象
    // 3. 渲染与步骤控制
    // 4. 动画和声音控制
    // 5. 互动反馈
    // 6. 初始化与重置
  </script>
</body>
</html>

可根据具体知识点调整布局，不要为了套模板保留无用模块。

十三、不同知识点的专门生成规则

字母书写

• 使用 SVG path、stroke-dasharray 和 stroke-dashoffset 展示笔画；
• 标注起笔点和方向箭头；
• 四线三格比例正确；
• 大写与小写分别演示；
• 加入易错提醒和描红练习。

自然拼读

• 字母可拖动到音素槽位；
• 点击单个字母播放分音，点击“合起来”播放合音；
• 目标音出现时同步高亮；
• 至少提供 3 个规则例词和 1 个辨音或拼读练习；
• 明确标识不符合本规则的例外词，不作错误归纳。

词汇学习

• 同屏新词不宜过多；
• 用真实语境或简洁插图表达词义；
• 至少包含认读和运用两个层次；
• 分类任务必须有明确分类依据；
• 最终用一句话或小对话使用核心词汇。

语法结构

• 用颜色区分句子成分，但保持全站含义一致；
• 句式变化时保留原句作为对照；
• 变化元素移动而不是突然替换；
• 时间、人物、数量或位置参数变化时，例句同步更新；
• 最终规则不超过 3 条，每条尽量不超过 20 个汉字。

情境对话

• 建立明确任务目标，如“买到三件物品”“找到图书馆”；
• 角色对话有开始、回应和任务结果；
• 提供至少一次学生选择；
• 错误选项给出语用提示；
• 可切换“示范模式”和“学生挑战模式”。

阅读故事

• 阅读前设置一个预测问题；
• 阅读中控制字幕与画面节奏；
• 阅读后至少包含顺序、细节或主旨中的一种任务；
• 提供关键词或图片复述支架；
• 不让复杂动效干扰阅读。

十四、教师模式

默认提供可切换的教师模式。教师模式可包含：

• 显示教学目标；
• 显示步骤讲解建议；
• 显示答案和语言规则；
• 调节动画或语音速度；
• 直接跳转到任一步骤；
• 隐藏中文释义；
• 清空学生作答；
• 全屏展示。

学生模式应简洁，只保留当前任务、必要提示和交互控件。

十五、反馈与激励

• 使用简短、积极、具体的反馈，如“Great! an 用在元音音素开头的单词前”；
• 错误反馈提供一个可执行线索，如“先听单词开头的声音”；
• 不使用羞辱性、惩罚性或过度夸张的反馈；
• 可设置星星、进度环或连续答对效果，但不让计分喧宾夺主；
• 教师可关闭音效和奖励动画；
• 不设计诱导持续点击的商业化机制。

十六、质量红线

出现以下任一问题时，不得交付：

• 依赖网络资源，断网后主体缺失；
• 只是一页静态课件，没有实质动画或交互；
• 动画很炫但不能说明知识变化；
• 英文拼写、语法、发音规则或文化信息错误；
• 字号过小，不适合班级后排观看；
• 只能悬停操作，触屏无法使用；
• 自动播放无法暂停；
• 点击“重置”不能恢复初始状态；
• 当前步骤与画面不同步；
• 题目没有反馈或错误后不能重试；
• 使用外链图片、CDN、在线字体或在线语音作为必要依赖；
• 页面包含未实现按钮、占位符、TODO 或示例残留；
• 大量装饰动画造成卡顿或干扰学习；
• 擅自复制完整教材、绘本或受版权保护的角色形象。

十七、交付前检查清单

学科准确性

• [ ] 知识点边界清楚，适合推定或指定年级。
• [ ] 核心词汇、句型和例句准确自然。
• [ ] 语音、拼读或词形变化规则无错误。
• [ ] 学习活动包含理解、操练和运用。
• [ ] 文化内容准确且无刻板印象。

教学体验

• [ ] 学习目标不超过 3 个且可以检测。
• [ ] 动画步骤清晰，当前步骤同步高亮。
• [ ] 至少有一种有效互动和即时反馈。
• [ ] 教师可以暂停、重播、前后切换和重置。
• [ ] 中文提示可隐藏或不会遮挡英语内容。

技术与离线

• [ ] 单文件 HTML 可直接运行。
• [ ] 无外部框架、CDN、在线字体和远程素材。
• [ ] Chrome、Edge 中功能正常。
• [ ] 断网不影响核心内容和交互。
• [ ] 无控制台错误、无失效按钮。
• [ ] 定时器、音频和状态切换不会相互冲突。

大屏与触屏

• [ ] 16:9 大屏布局完整。
• [ ] 后排可辨认核心文字。
• [ ] 控件足够大，操作路径清楚。
• [ ] 鼠标与触屏均可完成任务。
• [ ] 不出现横向滚动条或内容遮挡。

十八、最终输出要求

完成后向用户提供：

1. 一个可直接下载的 .html 文件；
2. 一段不超过 120 字的使用说明，说明适用年级、知识目标和主要操作；
3. 如浏览器系统语音可能存在差异，简短提示其不影响核心动画使用。

不要把大段 HTML 代码直接堆在聊天正文中，除非用户明确要求查看源码。优先生成并交付文件。

十九、示例任务映射

输入：a_e 自然拼读

应生成：静音 e 加入前后的词形与发音变化、音素滑轨、cap→cape 等对比例词、听音选择和拼词挑战。

输入：there is 和 there are

应生成：房间场景，学生增减物品时数量与句子实时变化，并通过单数、复数分类任务归纳规则。

输入：在餐厅点餐

应生成：菜单、顾客与服务员角色、What would you like?、I'd like... 等对话分支，以及完成订单的任务反馈。

输入：一般过去时

应生成：昨天时间轴、人物活动、规则和不规则动词变化、句式变形及“我的昨天”情境任务。

输入：问路

应生成：可交互街区地图、角色路线动画、Go straight、Turn left/right 等指令，并验证学生选择的路线是否到达目的地。

输入：四季与天气

应生成：同一场景的四季转换、天气粒子效果、服装和活动匹配，以及简单天气播报任务。

本 Skill 的判断标准不是“页面是否好看”，而是：学生能否通过清晰、可控、可互动的动画看懂英语知识的意义与变化，并在新的课堂情境中正确使用它。