Middle School Physics HTML Animation Master: Transforming Knowledge Points into Offline-Runnable Single-File Physics Animations

前言

给初中物理做课件的人,大概率遇到过同一件事:课本上的图是静态的,公式也是静态的。讲凸透镜成像,学生看不到物距变化时像的位置怎么移动;讲浮力,学生看不到排开液体体积和浮力的关系。自己用 PPT 画动画,一个场景要调几百个时间轴,改一次知识点就得重来一遍。

这个 Skill 的思路是把这件事交给模型:你给出一个知识点,它生成一个单文件 HTML,双击就能在浏览器里跑,支持拖动、点击、改参数,不需要服务器、不需要联网、不需要装依赖。

这是什么

初中物理html动画大师,坐标 @user_b0ac8c86/czwldhds,由社区开发者 user_b0ac8c86 发布并维护,当前版本 1.0.0,SkillHub 分类为 education。

它解决的问题很具体:把「初中物理的知识点」直接变成「可以离线打开、可以交互操作的 HTML 演示动画或虚拟实验页面」。产出物是单个 HTML 文件,适合放进课件、拷到教室电脑上直接打开。

SkillHub 页面显示评分 100000、下载 1105、安装 0,标签为 requires_api_key=false,也就是调用时不需要额外配置 API Key。

核心功能

下面介绍的每一项,都来自官方简介,未经实测扩展。

1、按知识点生成单文件 HTML。输入一个知识点,输出一个独立的 HTML 文件,把样式、脚本、动画逻辑都放在同一个文件里。
2、可离线运行。生成的页面不依赖外部 CDN、在线接口或本地服务,拷到别的机器上也能打开。
3、交互式演示。页面支持用户操作,用来演示物理过程,而不是只能看一段自动播放的动画。
4、覆盖初中物理的主要知识板块:力学、光学、电学、热学、声学、磁学、浮力、简单机械。
5、支持虚拟实验与规律探究页面,不只是演示现象,也可以做成让学生自己调参数、观察结果的形式。

触发方式

Skill 的触发依赖描述词。当用户提出下面这类需求时使用:制作初中物理动画、物理可视化课件、力学/光学/电学/热学/声学/磁学/浮力/简单机械的交互演示、物理虚拟实验、物理规律探究页面。

官方列出的触发词包括:

物理动画、物理HTML动画、物理可视化、物理交互课件、
虚拟物理实验、物理规律探究、凸透镜成像、电路模拟、浮力演示

写需求时直接带上学科板块和具体现象,比只说一句「做个物理动画」更容易命中。例如「做一个凸透镜成像的交互演示,能拖动物体改变物距」,比「做个光学动画」指向更明确。

安装与启用

这部分需要如实说明:已抓取的官方资料里只给出了 Skill 的坐标、版本、分类和标签,没有提供可直接复制的安装命令,也没有给出 Cursor、Codex CLI、Claude Code 各自的配置字段。

因此下面不放任何命令。要安装或启用,请到官方页面确认当前的接入方式,避免照抄到不存在的参数。

官方地址:

https://api.skillhub.cn/user_b0ac8c86/czwldhds

SkillHub 页面:

https://www.skillhub.cn/skills/user_b0ac8c86/czwldhds

坐标形式为 @user_b0ac8c86/czwldhds,在支持按坐标引用 Skill 的环境里,用这个坐标定位即可。标签 requires_api_key=false 表示不需要额外配置密钥。

典型用法

以下示例是按官方简介中的触发词组织的用法,不是实测输出,仅说明怎么把需求写清楚。

光学方向,最常见的是凸透镜成像:

做一个凸透镜成像的交互演示,单文件 HTML,可以拖动物体改变物距,
实时显示像的位置、大小和虚实。

电学方向,电路模拟:

做一个电路模拟的虚拟实验页面,支持切换电源、开关、滑动变阻器,
显示电流表和电压表读数。

力学方向,浮力演示:

做一个浮力演示动画,物体浸入液体的深度可调,
显示排开液体体积和浮力大小的变化。

简单机械方向:

做一个杠杆和滑轮组的交互演示,能改变力臂和拉力,显示平衡条件。

用法上有两个共同点:一是明确要求「单文件 HTML」和「可离线运行」,这两条直接对应 Skill 的产出形式;二是把可交互的参数写进需求里,比如物距、深度、力臂,这样生成的页面才有探究价值,而不只是一段循环播放的动画。

适用场景与注意

适合这些情况:初中物理教师做课堂演示课件、教研组做公开课素材、学生做物理规律探究作业、开发者快速产出一个可交互的物理现象原型。

需要注意的几点:

1、产出是教学演示页面,不是仿真引擎。涉及定量计算的场景,要自己核对数值是否符合教材口径,不要直接把页面上的数字当成标准答案。
2、知识点覆盖以官方简介列出的板块为准。声学、热学相对少见,需求写得不够具体时,生成结果可能偏简单。
3、交互深度取决于需求描述。只说「做个动画」和说「可以拖动改变某个量」,产出差别很大。
4、单文件意味着所有资源内联。如果后续要加外部字体、图表库或音频,需要自己处理,不要假设页面会自动联网加载。
5、安装命令在公开资料中缺失,接入前务必到官方页面确认,不要凭经验猜测配置项。

小结

它的价值在于把「从知识点到可交互 HTML」这一步压缩成一次对话:你描述现象和可操作的量,它产出一个能离线打开、能拖动调参的单文件页面。对于需要大量物理演示又不想在前端工程上花时间的场景,这是比较省事的路径。

官方地址:https://api.skillhub.cn/user_b0ac8c86/czwldhds

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye