内容正文:
null
AI可交互教学动画创作说明文档
上海市泾南中学 韩祯
一、AI 工具使用清单
1. DeepSeek:用于辅助编写 HTML、CSS 及 JavaScript 代码,实现页面结构搭建、响应式布局设计和交互逻辑开发
1. 飞象老师网页平台:提供教学动画核心内容的 iframe 嵌入资源,作为可交互教学内容的主体载体
二、创作目标
制作一个集成 “飞象老师” 教学资源的可交互网页,实现以下功能:
1. 展示指定的水循环动态模拟教学动画
1. 适配桌面端与移动端不同设备的显示需求
1. 实现设备类型自动检测与界面自适应调整
1. 提供桌面端到 “飞象老师” 官网的跳转入口
三、创作过程与 AI 工具使用思路
1. 需求分析阶段
1. 选取素材:以乌江新开发的白马杭电枢纽作为时事素材,结合重庆市以及乌江坝区的气候地形水文特征,设计贴近现实的水循环动画。
1. 目标拆解:通过 DeepSeek梳理核心需求,确定需要实现 "内容展示 + 设备适配 + 交互跳转" 三大功能模块
1. 技术选型:借助 DeepSeek编写代码,输入“飞象老师”任务对话框反复调试。
2. 页面结构设计(DeepSeek 辅助实现)
1. 基础框架搭建:使用 DeepSeek 生成 HTML 基础结构,包括<head>元数据配置和<body>内容容器
1. 口令输入:
我是一名高中地理老师,想给学生讲解一下水如何进行循环的知识点,请帮我制作一简单易懂的水循环动画,代码框架和参数如下,以html格式输出,要求如下—— 结合重庆武隆区 “喀斯特地貌、亚热带季风气候、乌江流域” 核心特征,以下提供 可落地的 AI 水循环动态模拟软件参数设计 + 简易开发程序框架,无需专业编程背景也可通过开源工具实现,适配中学地理课堂教学需求。
Deepseek给出的代码和如下:
重庆武隆区 AI 水循环动态模拟软件(参数设计 + 程序框架)
一、核心参数设计(紧扣武隆区域特色)
(一)基础地理参数(模拟真实环境)
参数类别
具体参数值
设计依据(武隆特征)
地形参数
- 地形类型:喀斯特地貌(山地占比 92%)、河谷(乌江沿岸)、溶洞群
- 海拔范围:160m(乌江河谷) - 2033m(仙女山主峰)
- 核心山地:仙女山(1900m)、白马山(1800m)、桐梓山(1500m)
- 坡度分布:河谷平缓(<15°)、山地陡峭(>30°)
武隆 “八分山、一分地、一分水”,喀斯特地貌突出
气候参数
- 气候类型:亚热带季风气候
- 年降水量:1200mm(集中于 5 - 9 月,占全年 70%)
- 降水强度:暴雨日数 15 天 / 年(最大日降水量 180mm)
- 蒸发量:年蒸发量 800mm(河谷 > 山地)
- 季风方向:夏季东南风(携带太平洋 / 南海水汽)、冬季西北风
武隆受季风影响,山地迎风坡降水丰富
水文参数
- 地表径流:乌江干流(武隆段长 74km)、芙蓉江支流
- 地下径流:溶洞暗河(占总径流 40%)
- 径流速度:河谷 0.8m/s、山地 1.5m/s
- 库区:白马航电枢纽库区(水位 340m,库容 2.3 亿 m³)
乌江是武隆主要地表径流,喀斯特地下径流显著
植被参数
- 植被覆盖率:65%(山地森林、河谷耕地)
- 主要植被:亚热带常绿阔叶林(仙女山)、农作物(河谷水稻 / 玉米)
武隆森林覆盖率高,植被对径流有调节作用
(二)水循环环节参数(突出武隆特殊性)
环节名称
核心参数
模拟效果说明
水汽输送
- 水汽来源:东南方向(占 80%)、局部蒸发(占 20%)
- 输送速度:夏季 5m/s、冬季 2m/s
- 抬升触发:遇海拔 > 1000m 山地自动抬升
模拟武隆降水主要来自季风输送,山地促水汽凝结
降水
- 山地降水强度:12mm/h(迎风坡)、河谷 6mm/h(背风坡)
- 降水类型:夏季暴雨(占 60%)、冬季小雨(占 20%)
- 溶洞区降水:局部小范围降水(陆地内循环)
体现武隆 “山地多雨、河谷少雨” 的空间差异
地表径流
- 汇流路径:山地→溪沟→乌江→长江
- 截留率:植被截留 20%、地表坑洼截留 5%
- 库区影响:白马航电枢纽拦截 30% 径流(水位稳定)
模拟乌江径流汇集过程及水利工程对径流的调节
地下径流
- 渗透率:喀斯特岩层渗透率 30%(非喀斯特 10%)
- 暗河流速:0.3m/s
- 出露点:芙蓉江溶洞、天生三桥地下水出口
突出武隆喀斯特地貌地下径流发达的特色
蒸发 / 蒸腾
- 蒸发强度:河谷 4mm/d、山地 2mm/d
- 植被蒸腾:森林 3mm/d、耕地 1.5mm/d
模拟地形、植被对蒸发的影响
(三)模拟场景参数(适配教学需求)
场景名称
触发条件
教学用途
正常水循环场景
默认参数(年降水量 1200mm、无人类活动)
认识武隆自然水循环过程
暴雨场景
降水强度提升至 20mm/h、持续 3 小时
分析暴雨对地表径流、地下径流的影响
航电枢纽场景
乌江干流径流拦截 30%、库区水位升高 50m
探究人类活动对水循环的影响
陆地内循环场景
关闭外部水汽输送、仅保留局部蒸发→降水
对比海陆间循环与陆地内循环
二、程序开发框架(低门槛开源实现)
(一)开发工具选择(免费 + 易操作)
工具类型
推荐工具
核心优势
开发语言
Python(基础语法即可)
开源库丰富,地理数据处理便捷
可视化库
Pygame(2D 动态模拟)、Matplotlib(数据可视化)
支持动态绘制水流、地形,操作简单
地理数据库
GeoPandas(处理武隆地形 / 河流数据)、Shapely(空间分析)
加载武隆真实地理数据,确保模拟准确性
界面工具
Tkinter(Python 内置,无需额外安装)
快速搭建简易操作界面(场景切换、参数调节)
(二)核心程序代码框架(简化版,可直接修改使用)
# 1. 导入依赖库
import pygame
import matplotlib.pyplot as plt
import geopandas as gpd
import random
# 2. 初始化模拟窗口
pygame.init()
screen = pygame.display.set_mode((1200, 800)) # 窗口大小
pygame.display.set_caption("重庆武隆区水循环动态模拟")
# 3. 加载武隆地理数据(提前下载shapefile文件)
wulong_terrain = gpd.read_file("wulong_terrain.shp") # 武隆地形数据
wulong_river = gpd.read_file("wulong_river.shp") # 乌江及支流数据
wulong_cave = gpd.read_file("wulong_cave.shp") # 溶洞分布数据
# 4. 定义水循环核心参数(对应前文设计)
class WaterCycle:
def __init__(self):
# 地形参数
self.mountain_altitude = 1500 # 平均山地海拔
self.river_speed = 0.8 # 乌江河谷流速
self.cave_permeability = 0.3 # 溶洞渗透率
# 气候参数
self.rain_intensity_mountain = 12 # 山地降水强度(mm/h)
self.rain_intensity_river = 6 # 河谷降水强度(mm/h)
self.vapor_speed = 5 # 水汽输送速度(m/s)
# 水文参数
self.surface_runoff_ratio = 0.6 # 地表径流占比
self.ground_runoff_ratio = 0.4 # 地下径流占比
# 5. 水汽输送模拟
def vapor_transport(self):
# 从东南方向生成水汽粒子(蓝色小圆点)
for _ in range(50):
x = random.randint(0, 200)
y = random.randint(300, 600)
pygame.draw.circle(screen, (135, 206, 235), (x, y), 3)
# 水汽遇山地抬升(x>500、y<400为山地区域)
if x > 500 and y < 400:
y -= self.vapor_speed * 0.5 # 抬升效果
# 6. 降水模拟
def precipitation(self):
# 山地区域(x500 - x800、y200 - y400)暴雨
for _ in range(30):
x = random.randint(500, 800)
y = random.randint(200, 400)
pygame.draw.line(screen, (0, 191, 255), (x, y), (x, y + 10), 2)
# 河谷区域(x300 - x500、y600 - y800)小雨
for _ in range(10):
x = random.randint(300, 500)
y = random.randint(600, 800)
pygame.draw.line(screen, (173, 216, 230), (x, y), (x, y + 5), 1)
# 7. 地表径流模拟(乌江干流)
def surface_runoff(self):
# 绘制乌江干流(从x800,y400到x200,y800)
pygame.draw.line(screen, (0, 0, 255), (800, 400), (200, 800), 8)
# 水流粒子效果
for _ in range(40):
x = random.randint(200, 800)
y = 2 * x / 3 + 267 # 贴合乌江河道曲线
pygame.draw.circle(screen, (30, 144, 255), (x, y), 2)
# 8. 地下径流模拟(溶洞区域)
def ground_runoff(self):
# 溶洞区域(x600 - x700、y300 - y400)
pygame.draw.rect(screen, (169, 169, 169), (600, 300, 100, 100), 2)
# 地下水流(灰色粒子)
for _ in range(15):
x = random.randint(600, 700)
y = random.randint(300, 400)
pygame.draw.circle(screen, (105, 105, 105), (x, y), 2)
# 9. 场景切换功能
def switch_scene(scene_type):
wc = WaterCycle()
if scene_type == "normal":
# 正常场景
wc.vapor_speed = 5
wc.rain_intensity_mountain = 12
elif scene_type == "rainstorm":
# 暴雨场景
wc.vapor_speed = 8
wc.rain_intensity_mountain = 20
elif scene_type == "dam":
# 航电枢纽场景
wc.surface_runoff_ratio = 0.3 # 拦截径流
# 10. 主循环(运行模拟)
def main():
running = True
while running:
screen.fill((255, 255, 255)) # 白色背景
wc = WaterCycle()
# 绘制武隆地形(简化:山地 = 灰色矩形,河谷 = 浅绿色)
pygame.draw.rect(screen, (160, 160, 160), (500, 200, 300, 200)) # 山地
pygame.draw.rect(screen, (144, 238, 144), (200, 600, 600, 200)) # 河谷
# 调用各环节模拟
wc.vapor_transport()
wc.precipitation()
wc.surface_runoff()
wc.ground_runoff()
# 事件处理(如点击按钮切换场景)
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
pygame.display.update()
if __name__ == "__main__":
main()
(三)关键数据获取渠道(确保参数真实)
武隆地形 / 河流数据:从 “地理空间数据云” 下载 Landsat 8 卫星影像,用 QGIS 软件提取地形、河流矢量数据(保存为 shp 格式);
气候数据:重庆市气象局官网 “武隆区年度气候公报”(获取降水量、蒸发量、季风方向);
水文数据:长江水利委员会 “乌江流域水资源公报”(获取径流量、地下径流占比);
工程数据:重庆白马航电枢纽官方网站(获取库区库容、径流拦截率)。
三、教学适配优化(课堂实操说明)
简化操作界面:在程序中添加 3 个按钮(“正常场景”“暴雨场景”“航电枢纽场景”),教师点击即可切换,无需调整复杂参数;
标注可视化:在模拟画面中添加文字标注(如 “仙女山”“乌江”“溶洞暗河”),学生直观识别地理要素;
速度调节:添加 “模拟速度” 滑块(1 - 5 倍速),课堂演示时用 2 倍速快速呈现完整循环,避免耗时过长;
兼容性处理:将程序导出为.exe 文件(用 PyInstaller 工具),无需安装 Python 环境,直接在教师电脑运行。
四、效果预览
运行后将呈现:蓝色水汽从东南方向移动,遇灰色山地抬升后形成蓝色降水,山地水流汇入蓝色乌江(地表径流),溶洞区域出现灰色地下径流粒子;
切换 “暴雨场景” 后,降水粒子增多、水流速度加快,模拟山洪过程;
切换 “航电枢纽场景” 后,乌江水流变缓、水位升高,体现工程对径流的调节作用。
通过以上参数和程序框架,可快速实现贴合武隆区域特色的水循环模拟软件,无需专业编程能力,修改参数即可适配课堂教学需求。
3. 交互软件初稿生成
1. 基础样式确定:利用飞象老师平台已有的通用水循环模拟动画,确定页面风格
1. 口令输入:制作一个同款教学动画,具体需求包括:结合重庆武隆区 “喀斯特地貌、亚热带季风气候、乌江流域” 核心特征,以下提供 可落地的 AI 水循环动态模拟软件参数设计 + 简易开发程序框架,无需专业编程背景也可通过开源工具实现,适配中学地理课堂。随后将deepseek之前给出的代码粘贴发送。
1. 第一次生成网页显示:https://musk-online.fbcontent.cn/pub-musk-ai-studio/workflow/file/document/gdqeG88ZN6z4c8VRk8sRGi.html
4. 反复调试页面效果
1. 第一次补充口令:东南季风的方向调整为从右侧进入,还有再根据重庆武隆的地图,检查一下白马山、仙女山、乌江干流以及溶洞的位置
1. 第二次生成网页显示:https://musk-online.fbcontent.cn/pub-musk-ai-studio/workflow/file/document/3NAL7hXgK8CBxbxjHfuTeM.html
1. 第二次补充口令:在此基础上,每个场景作以下调整,以保证动画分步演示水循环完整过程:先播放 “海陆间循环” 动画(标注 “太平洋水汽→东南季风输送→武隆山地抬升→降水→乌江地表径流→汇入长江→回归海洋”),点击各环节弹出通俗解释(如 “水汽输送”:“来自南海、太平洋的暖湿气流,经季风带到武隆,遇仙女山、白马山地形阻挡形成丰富降水”);再切换演示 “陆地内循环”(标注 “武隆喀斯特溶洞地下水蒸发→局部水汽凝结→山区小范围降水”),对比两种循环的范围差异,重点突出武隆 “山地多、溶洞广” 对循环的影响。“航电枢纽场景”中增加以下模拟任务以便完成以下步骤的教学:
教师演示 AI 模拟,直观呈现连锁反应
聚焦 2 个核心变量,快速演示两组模拟:
① 操作 “减少武隆地区降水 30%”:点击按钮后,屏幕实时生成连锁反应动画(蓝色降水粒子减少→乌江地表径流变细→库区水位线下降→发电机组图标变暗→周边植被变黄),鼠标再次经过“减少武隆地区降水 30%”按钮时,弹出文字提示 “降水减少→地表径流减少→发电量降低→植被缺水”;
② 操作 “增加航电枢纽下泄流量 20%”:演示动画(库区水位下降→下游河道水流变宽→沿岸绿地变多→鱼类图标增多),鼠标再次经过按钮“增加航电枢纽下泄流量 20%”时文字提示 “下泄流量增加→下游水资源充足→生态改善→航运条件优化”;
演示中简化操作,只保留核心变量调节,避免复杂设置占用时间。
1. 第三次生成网页显示:https://musk-online.fbcontent.cn/pub-musk-ai-studio/workflow/file/document/rwqJJiP8rtwAAoad78Qsca.html
1. 第三次补充口令:强化以下效果,现在不同场景下效果区别不明显: “暴雨场景”:降水粒子急剧增多、水流速度明星加快,模拟山洪过程; “航电枢纽场景”:乌江水流变缓、水位升高,体现工程对径流的调节作用。 “陆地内循环场景”:标注 “武隆喀斯特溶洞地下水蒸发→局部水汽凝结→山区小范围降水”),最好能局部放大喀斯特溶洞部位展示“地下水蒸发→局部水汽凝结→山区小范围降水”的过程,详细显示地下水颗粒蒸发后在空中凝结、在山区产生小范围降水的画面。对比两种循环的范围差异,重点突出武隆 “山地多、溶洞广” 对循环的影响。
1. 第四次生成网页显示:https://musk-online.fbcontent.cn/pub-musk-ai-studio/workflow/file/document/W4Vs845rrwHaYWitAPkaFX.html
1. 第四、五、六次分批补充口令:
18. 在此基础上,把芙蓉江去掉, 然后再在乌江白马航电枢纽那里弄一个叫石梁河的支流和干流连接 然后长江一路向左上画到屏幕上方向东流,向右流动注入太平洋。
18. 长江在图上方流入太平洋的过程加一条蓝色河流形状表示长江,把右上角太平洋标注出来。
18. 把画面左侧和上方的长江形状连起来。
1. 第六次生成网页显示:https://musk-online.fbcontent.cn/pub-musk-ai-studio/workflow/file/document/gSu8Eib8TncWt7YVMexkoc.html
至此,一个完整的动画效果已经显现:
5. 进一步交互优化
为了学生在课堂初学时能够从无到有记忆并掌握水循环环节的名称,我继续对平台提出需求:
这些水循环的环节先不显示,点击相应位置后才显示出来;在此基础上隐藏这些环节的文字,点击后和动画效果一起呈现;在此基础上,可以把画面最右边一整块弄成太平洋, 然后把仙女山 白马山 亚热带森林 石梁河 白马航电枢纽 乌江干流等显示出来, 学生点击水循环各环节呈现环节名称并展示动画。
经完善后网页显示:https://musk-online.fbcontent.cn/pub-musk-ai-studio/workflow/file/document/Dqq3seG5xnmxxVYdvvoPxB.html
效果如下图:
四、实现效果说明
1. 细节完善:为了使动画效果更贴近地理事实,同时保证重要环节学生观看清晰,我最后发送口令:乌江放大一点,还有石梁河汇流的意义弹出框中,把第二个“为航电枢纽提供水源补充”改成“为沿线提供水源补充”。
最终系统反馈:
这个完整的HTML文件基于您的需求进行了以下两个关键调整:
🔧 主要修改内容
1. 乌江干流加粗显示
将乌江干流的高度从 12px 增加到 18px
将边框半径从 6px 增加到 9px
增强了阴影效果,使乌江在画面中更加突出显眼
2. 石梁河汇流意义文字修正
将弹出框中的"为航电枢纽提供水源补充"修改为"为沿线提供水源补充"
更准确地反映了石梁河对整个流域沿线地区的水源补充作用
📖 使用指南
场景切换:点击四个场景按钮体验不同的水循环模式
交互学习:点击地图上的橙色热点观察具体的水循环过程
详细解释:点击热点后会弹出科学解释窗口
航电枢纽模拟:在航电枢纽场景下可以调节参数观察连锁反应
速度控制:使用滑块调节动画播放速度
💡 HTML交付物的使用方式
全屏模式:点击预览界面右上角【全屏】按钮,即可进入大屏浏览模式,适合课堂演示
下载本地:点击预览界面右上角【下载】按钮,将HTML文件保存到本地,双击文件名即可直接使用,支持离线运行
插入PPT课件:将下载的HTML文件以【附件】的形式插入PPT课件中,使用时点击PPT中的附件即可通过浏览器打开,方便课堂演示
🔧 兼容性保障
跨平台运行能力(Windows/Mac/移动端)
浏览器兼容性(Chrome >= 63)
离线运行保障(无外部依赖)
现在乌江干流在视觉上更加突出,石梁河的汇流意义描述也更加准确。您对这个版本满意吗?如果还需要其他调整,请随时告诉我!
最终生成网页文件如压缩包里的成品文件所示,效果截屏如下:
1. 生成成果:成功嵌入 “飞象老师” 的水循环动态模拟教学动画,保持原内容的交互性。
19. 桌面端(宽度 > 768px):显示完整水印栏和跳转按钮,点击可打开官网
19. 移动端(宽度≤768px):自动调整布局比例,隐藏跳转按钮,优化触控区域
交互体验:窗口大小变化时自动触发布局重绘,确保不同设备下的显示一致性
五、总结
本项目通过 DeepSeek 辅助编写代码,高效实现了页面结构、响应式布局和交互逻辑,结合 “飞象老师” 提供的教学资源,快速完成了可交互教学动画的集成。
在整个创作过程中,从最初紧扣武隆区域特色的核心参数设计,到低门槛的开源程序开发框架搭建,再到关键数据的多渠道获取以确保参数真实,每一步都充分考虑了教学适配优化,为课堂实操提供了清晰说明。交互软件初稿生成阶段,借助飞象老师平台的通用动画确定基础样式,通过精准口令输入实现了武隆特色的融入;反复调试和进一步交互优化则不断提升了页面效果与交互体验,最终呈现出基本符合地理事实的实现效果。整个过程无需专业编程能力,教师可通过修改参数轻松适配教学需求,学生也能在点击交互中直观理解水循环各环节,充分体现了AI技术在地理教学资源开发中的高效性与实用性,为喀斯特地貌区域水循环的课堂教学提供了生动且可操作的动态模拟工具。
AI 工具在代码生成、逻辑优化和兼容性处理方面提供了重要支持,显著提升了开发效率,提升了学生学习的新鲜感和参与度,进一步促进了教学的有效进行。
学科网(北京)股份有限公司
$