我默默思考了十秒钟：希沃、WPS、PPT似乎都无法实现这种效果。

本来想回绝，但老师这节课真的很需要这个效果。这个想法很好，就是不知道怎么实现……

"好吧，我试试看。"

常规方法不好做，那就试试HTML网页动态课件。

选择豆包，是因为它可以直接插到希沃里头。

我把需求发给豆包，用的就是平常说的人话，并没有去设计什么格式的提示词。

💬 第一次提示词：

"我需要制作一个HTML动态网页课件，显示出一个长方形，向右平移300，长方形上有几个点，每个点也要同时向右平移300"

💬 第二次提示词：

"这个长方形的大小可以通过滑块进行调节，长和宽均可调整，移动距离也能控制。移动的方向可以设置为向上和向下。将整个文件设置为全屏显示。移动距离置于两点中间。"

功能越来越完善了：可以调整方向、距离、大小。

但还有一个问题：文件一点开就会移动，需要点击"开始移动"才能动。

最后把色调改成科技感的蓝色，再增加一个复位功能，作品就成形了。

📋 最终完整提示词：

请生成一个全屏HTML+Canvas动画，名称为：长方形的平移。 整体要求：科技感蓝色风格，页面分左右两栏，左侧是动画运行区，右侧是控制面板，全屏显示无滚动条。 功能与动画要求： 

1. 右侧控制面板包含：长方形长度滑块、宽度滑块、内部点位数量滑块（1-20）、移动距离滑块、移动方向选择框（向上、向下、向右）、开始移动按钮、复位按钮。 

2. 所有长度单位使用 cm，不显示 px。 

3. 初始状态显示一个静止的长方形，内部有随机分布的高亮黄色醒目圆点。 

4. 点击【开始移动】才开始动画，移动过程中：   - 原来的原始长方形保持不动   - 生成一个新的长方形，按照选择的方向（上/下/右）平移移动   - 内部所有黄色圆点跟随新长方形一起平移运动 

5. 每个原始点与移动后的点之间必须绘制清晰的虚线连接。

 6. 移动距离数字显示在每条虚线的正中间。 

7. 点击【复位】按钮，所有图形、点位、距离全部回到初始状态，可重新开始。 

8. 切换方向、修改参数时自动复位。 

9. 视觉：科技深蓝色界面，长方形清晰不消失，动画流畅，虚线明显，黄色圆点醒目。 

10. 页面标题：长方形的平移。

生成式AI让不可能变成可能，

用好工具，事半功倍。

课件地址：

https://www.doubao.com/building/render/8e44c7e833c8880d?is_code=1