第 17 课 物理课件一：运动、受力与实验数据可视化
本课定位
围绕运动学和实验数据，把抽象的时间、速度、位移和图表变化做成动态可视化。
本课技术框架
- Canvas 动画
- 图表组件
- 参数滑杆
- 实验数据展示
学习目标
- 做出一个运动或受力演示课件
- 把实验数据和图像变化联动
- 建立物理课件中的“看现象 + 读数据 + 提问题”节奏
课前准备
- 准备一个物理专题与一组实验数据
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 展示运动轨迹和数据图表联动课件 | 展示运动轨迹和数据图表联动课件 |
| 10-20 分钟 | 讲物理课件中动画与图表结合的价值 | 讲物理课件中动画与图表结合的价值 |
| 20-40 分钟 | 用 Codex 完成一个运动或受力演示页 | 用 Codex 完成一个运动或受力演示页 |
| 40-55 分钟 | 补实验数据和课堂问题 | 补实验数据和课堂问题 |
| 55-60 分钟 | 现场讨论这页如何辅助讲解 | 现场讨论这页如何辅助讲解 |
核心讲授点
- 物理课件很适合把“变化”和“数据”放在同一个屏幕里
- 动画不是装饰，它是帮助学生把公式背后的现象看见
- 好的物理课件应该带着问题走，而不是只播放现象
课堂案例
斜抛运动与速度分解实验页
让学生同时看到运动轨迹、速度分量和时间变化。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“物理课件一：运动、受力与实验数据可视化”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中物理八年级
- 课题：斜抛运动与速度分解
- 教学目标：同步观察轨迹、水平位移、竖直位移和时间变化
- 现有素材：实验数据表、轨迹示意图、课堂追问 4 条
- 页面需求：Canvas 动画、图表页、暂停提问按钮、总结页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的网页课件
- 至少包含这些文件：index.html、style.css、script.js
- 如果需要摄像头识别，请优先用浏览器可直接运行的方案或 MediaPipe CDN 方案提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中物理八年级
- 课题：斜抛运动与速度分解
- 教学目标：同步观察轨迹、水平位移、竖直位移和时间变化
- 现有素材：实验数据表、轨迹示意图、课堂追问 4 条
- 页面需求：Canvas 动画、图表页、暂停提问按钮、总结页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的网页课件
- 至少包含这些文件：index.html、style.css、script.js
- 如果需要摄像头识别，请优先用浏览器可直接运行的方案或 MediaPipe CDN 方案提示词 3：加入摄像头动作交互
text
请把这个课件升级成带摄像头动作交互的版本，让学生可以通过挥手、张开手掌或举手完成翻页、揭晓答案或暂停。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中物理八年级
- 课题：斜抛运动与速度分解
- 教学目标：同步观察轨迹、水平位移、竖直位移和时间变化
- 现有素材：实验数据表、轨迹示意图、课堂追问 4 条
- 页面需求：Canvas 动画、图表页、暂停提问按钮、总结页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的网页课件
- 至少包含这些文件：index.html、style.css、script.js
- 如果需要摄像头识别，请优先用浏览器可直接运行的方案或 MediaPipe CDN 方案本课交付物
- 一份运动 / 实验数据可视化课件
创意扩展
- 做受力分析拖拽页
- 增加“预测后再播放”模式