带领中小学老师制作 AI 交互课件之第1课:第一次用 WorkBuddy 制作交互动画

本节课完成一个简单的“太阳升起”动画。点击按钮后，太阳从地平线下方升起，天空逐渐变亮；点击重置按钮，可以重新播放。

不需要编程基础。先把制作要求说清楚，再根据预览效果逐步修改即可。

一、课前准备

1. 检查电脑系统

WorkBuddy 支持 Windows 10 及以上版本，以及 macOS 12 及以上版本。Windows 7、Windows 8 和 Windows 8.1 无法运行。

2. 新建课程文件夹

在电脑上新建文件夹，并按日期或课次保存作品。例如：

WorkBuddy交互动画课程
└── Day01-太阳升起

Windows 下可以保存在：

D:\WorkBuddy交互动画课程\Day01-太阳升起

每个作品单独使用一个文件夹，查找和修改都更方便。练习文件夹中不要放入学生姓名、成绩、照片等个人信息。

二、安装并登录 WorkBuddy

打开 WorkBuddy 官网，下载与电脑系统相匹配的安装包。

Windows 用户按照安装向导操作即可：

1. 1. 双击安装包；
2. 2. 同意安装协议；
3. 3. 选择安装位置；
4. 4. 建议勾选“创建桌面快捷方式”；
5. 5. 点击“安装”。

安装完成后启动 WorkBuddy，阅读并勾选服务条款和隐私协议，再使用微信扫码登录。

插图：WorkBuddy 下载页面、安装界面和登录界面。

三、认识操作界面

进入 WorkBuddy 后，重点认识三个区域：

• • 左侧是任务和工作空间，用来查找以前做过的内容；
• • 中间是对话区，在这里输入制作要求；
• • 右侧是结果区，用来查看文件、修改记录和网页效果。

新建任务时还会看到三种工作模式：

本节课需要生成网页文件，因此选择“做一做”。

插图：标出任务区、对话区、结果区和工作模式的位置。

四、新建动画任务

点击“新建任务”，按下面的方式设置：

1. 1. 工作模式选择“做一做”；
2. 2. 工作目录选择刚才建立的 Day01-太阳升起；
3. 3. 权限保持“默认权限”；
4. 4. 暂时不安装其他技能。

如果出现权限确认窗口，先检查操作路径。确认 WorkBuddy 只在本课文件夹中创建或修改文件，并且没有删除其他资料，再允许执行。

五、制作“太阳升起”动画

把下面这段要求复制到对话框中：

请在当前工作空间制作一个“太阳升起”交互动画，并保存为 index.html。

制作要求：
1. 面向小学三至六年级学生；
2. 页面标题为“观察太阳升起”；
3. 画面中有天空、太阳、云朵、草地和一座小房子；
4. 初始画面是夜晚，太阳位于地平线下方；
5. 点击“太阳升起”按钮后，太阳缓慢升到天空，天空从深蓝色逐渐变成浅蓝色；
6. 动画结束后显示“新的一天开始了！”；
7. 增加“重新观察”按钮，点击后恢复初始画面；
8. 使用较大的中文字体和清晰的按钮，适合教室大屏展示；
9. 不调用外部图片、字体和网络资源，所有内容放在一个 HTML 文件中；
10. 完成后检查两个按钮和动画是否正常，并打开网页预览。

发送后，WorkBuddy 会在课程文件夹中创建 index.html。完成时间与电脑性能、网络情况和所选模型有关，中途需要确认文件操作时，核对路径后再继续。

六、检查动画效果

任务完成后，在右侧结果区找到 index.html，打开网页预览，并按顺序检查：

1. 1. 页面标题是否正确；
2. 2. 点击“太阳升起”后，太阳是否开始移动；
3. 3. 太阳上升时，天空是否逐渐变亮；
4. 4. 动画结束后，提示语是否出现；
5. 5. 点击“重新观察”后，画面是否恢复原状。

这五项全部正常，说明第一个交互动画已经完成。

插图：动画初始画面、太阳升起过程和动画结束画面。

七、看懂交互动画的基本结构

这个作品由五个部分组成：

以后设计课堂动画时，可以先写清楚这五项，再开始制作。这样比直接说“帮我做一个动画”更容易得到符合教学需要的结果。

八、继续调整作品

第一次生成的效果不一定完全合适。直接在原任务中提出修改要求即可，不必重新创建文件。

调整动画速度

把太阳升起的时间调整为5秒，运动过程保持平稳。其他内容不变，修改后重新检查两个按钮。

增加观察问题

在动画下方增加“观察任务”：
1. 太阳从哪个方向升起？
2. 天空的颜色发生了什么变化？

文字要适合教室大屏阅读，其他内容保持不变。

调整低年级风格

把画面调整得更适合小学低年级学生：颜色明亮，图形圆润，按钮更大。不要使用外部图片，现有交互功能保持不变。

提出修改要求时，尽量说明三件事：改什么、改成什么样、哪些内容不要动。

九、常见问题

1. 对话中出现了代码，但文件夹中没有文件

继续输入：

请把完整内容写入当前工作空间的 index.html，不要只在对话中展示代码。完成后打开网页预览。

2. 右侧没有出现网页预览

继续输入：

请检查 index.html 是否能够直接运行，并在内置浏览器中打开预览。

也可以打开课程文件夹，双击 index.html，使用电脑浏览器查看。

3. 点击按钮没有反应

继续输入：

点击按钮后没有反应。请先检查原因，再修复按钮事件和动画状态。保留现有画面，修复后重新测试。

4. 预览页面一片空白

继续输入：

网页预览为空白。请检查 HTML、CSS 和 JavaScript 是否有错误，修复后重新打开预览。不要调用外部网络资源。

十、课后练习

从下面选择一项，在现有作品上继续修改：

• • 小学科学：增加太阳东升西落的方向提示；
• • 小学语文：增加一句描写日出的古诗；
• • 小学英语：增加 sun、sky、morning 三个单词；
• • 初中地理：增加太阳直射位置随季节变化的说明；
• • 小学美术：重新设计天空、太阳和草地的配色。

十一、完成检查

• • 能够打开并登录 WorkBuddy；
• • 建立了单独的课程文件夹；
• • 生成了 index.html；
• • 网页可以正常预览；
• • 点击按钮后太阳能够升起；
• • 天空颜色能够变化；
• • 动画结束后出现文字提示；
• • “重新观察”按钮可以恢复画面；
• • 至少根据预览效果修改过一次；
• • 知道作品文件保存在什么位置。