阿基米德泡澡、冰面救人、深海鱼变形……我把物理课塞进了浏览器

一件让我很不安的事

我翻过很多初中物理课件。

绝大多数长这样：白底黑字，公式写一遍，旁边配一张从教材扫描下来的图，图里一个方块压着另一个方块，标注着"受力面积 S"。

然后老师讲：压强等于压力除以受力面积，F 除以 S。

学生记下来，考试填公式，过了。

但问他：冬天救落水的人，你应该站着走过去还是趴下去爬？

沉默。

他背过公式，但没建立直觉。

这件事让我很不安——物理学的明明是这个世界的运行规律，为什么课件里却是一个个孤立的、没有温度的方块？

所以，我决定用 AI 重新做一套初二物理课件。

从一个实验开始

第一个课件，我选了压强这一章。

教材上的经典演示是"砖块正放和侧放"——用同一块砖，比较两种摆法对桌面的压强。逻辑清晰，但说实话，我没见过哪个初中生在学完这个之后，第一反应会联想到"我要去救人，该怎么走冰面"。

于是我把场景换掉了：

冬天，有人落入冰窟。你去救人，应该站着走还是趴下爬？

画面里，左边是一个站立的人，脚踩在冰面上；右边是同一个人趴下来，全身平铺在冰面上。拖动滑块调整体重，实时计算压强，当压强超过冰面承载极限，左边的冰面出现裂纹——红色警告亮起：冰裂了！

右边始终是绿色：安全！

不需要讲公式。学生自己拖一下，就知道为什么要趴着爬了。

这个设计原则，贯穿了整套课件：画人，不画方块；讲场景，不讲器材。

12 章，12 个场景

初二物理上下两册，共 12 章。每章一套课件，每套课件都有一个交互实验，把那章最核心的概念"跑起来"。

上册 6 章：

• • 机械运动：参照物视角切换——同一列火车，站在站台上看它在动，坐在车上看它静止。动画实时切换，让"运动是相对的"从一句话变成眼睛看得见的东西。
• • 声现象：鼓面振动可视化——拖动滑块调节振动频率和振幅，看声波图形实时变化，音调高了波纹密，响度大了波纹高。
• • 物态变化：熔化曲线交互——选晶体或非晶体，拖动加热进度，看温度曲线实时绘制。晶体有平台段，非晶体没有，一目了然。

• • 光现象：反射定律交互——拖动入射角滑块，反射光线实时随动，入射角等于反射角，学生自己验证。
• • 透镜及其应用：凸透镜成像——拖动物体位置，系统实时计算像距，动态展示像是放大还是缩小、正立还是倒立、实像还是虚像。物理课里最难讲清楚的成像规律，拖一拖全明白了。

• • 质量与密度：天平和量筒操作模拟，结合密度计算练习。

下册 6 章：

• • 力：弹簧测力计模拟——挂上砝码，弹簧伸长，示数随重力变化，G=mg 不再是空洞的符号。
• • 运动和力：摩擦力大小——改变接触面粗糙程度和正压力，实时看摩擦力如何变化。
• • 压强：三个实验联动——冰面救人（压力与面积）、深海鱼形态变化（液体压强随深度变化）、马德堡半球（大气压强）。

• • 浮力：阿基米德泡澡——滑块控制入水程度，溢出的水越多，浮力越大，收集桶的水位实时上涨，复原按钮不可逆（物理告诉你，水溢出去就回不来了）。
• • 功和机械能：拖动力和位移两个滑块，做功区域实时标注，W=Fs 不再是抽象符号。
• • 简单机械：杠杆平衡——三个滑块分别控制两侧力臂和力的大小，实时看杠杆是否平衡，力矩相等原理自然呈现。

物理准确性，是最难的部分

做交互动画，最怕的不是做不出来，而是做出来的东西传递了错误的物理直觉。

在做阿基米德泡澡实验的时候，我遇到了一个典型的问题：

第一版代码里，滑块拖到 58% 的时候，人物在视觉上已经完全没入水中了。但滑块后面还有 42% 的行程，什么也没变——这段"假行程"不仅没有教学意义，还会让学生误以为"入水程度"这个变量是随便定义的。

正确的设计应该是：滑块推到 100%，人刚好完全没入水中，头顶刚好与水面齐平。

要实现这个，需要从物理规律反推坐标系——t=0 时脚底与水面齐平，t=1 时头顶与水面齐平，身体的倾斜、缩短、弯曲都要在这个范围内完成映射，数学上精确验证。

另一个问题出在溢水逻辑上：早期版本里，把滑块往回拖，水位会下降，收集桶的水会"回流"消失。

这是物理错误。水溢出去就不会自动回来。

所以我加了一个机制：滑块不可回退。水一旦溢出，状态锁定，只有点击"复原（重新放水）"才能重置——这才是真实物理过程的正确表达。

类似的细节还有很多：深海鱼的体形变化要符合真实海洋生物学数据（不同深度代表不同物种），马德堡半球要精确计算大气压力与马匹数量的关系，托里拆利实验的汞柱高度要随海拔变化而精确计算……

一个交互动画，如果物理逻辑不对，它教的就是错的。这比没有动画更糟糕。

AI 是怎么参与的？

我用的是腾讯 WorkBuddy。整个流程是这样的：

我描述场景和物理约束（比如"冰面救人，体重 60kg，冰承压极限 8000Pa，站着超限，趴着安全"），AI 生成 Canvas 动画代码，我验证物理逻辑，发现问题反馈，AI 修复，循环迭代。

有几个 Bug 很有意思：

一个是 CSS 里一个分号丢失，导致 color:var(--text)display:flex 被浏览器当成一条属性，Flex 布局完全失效，整个课件内容区缩成一根竖条，文字单字换行。影响了 10/12 个课件，一行修复搞定。

另一个是 Flexbox min-width 陷阱——CSS 规范里，flex 子项默认的最小宽度是 auto（内容最小宽度），而不是 0。课件里有一个 560px 宽的 canvas，导致内容区宽度被锁死，sidebar + 内容区加起来溢出视口，布局崩溃。三行修复：给 .main 和 .layout-wrap 各加 min-width:0，给 canvas 加 max-width:100%。

这些问题 AI 生成代码时埋下了，但也是 AI 帮我批量找出来、批量修复的。

最后的样子

12 套课件，全部完成后，我给它们加上了统一的顶部导航条——上册/下册分组，弥散透明磨砂玻璃风格，当前章节微胶囊高亮，12 章之间随时跳转。

底部有署名，有关注公众号的二维码悬停展示，没有弹窗，只是鼠标放上去就出现。

每套课件的开头，都有一个前测诊断：3 道单选题，检查上一章的掌握情况，答完即时给出解析，显示学情诊断。答错没关系，学完就会了。

每套课件结束，都有按 Bloom 认知层级设计的分层练习题：记忆→理解→应用→分析，逐层深入。

学习进度存在浏览器本地，下次打开记得你学到哪里了。

写在最后

这套课件目前在我们团队内部使用，下一步会配合老师的课堂教学做进一步打磨。

我知道 12 套课件解决不了物理教育的所有问题。但如果有一个学生，因为拖了一下滑块，真正理解了"为什么趴着比站着安全"，那就够了。

物理讲的是这个世界的运行规律。它本来就不应该只活在黑板上。

如果你是物理老师，或者正在做教育内容的朋友，欢迎留言交流。

关注探智空间，持续分享 AI × 教育的实践案例。