教案对齐官方方案书:重写为 5 天 C++/Qt 教学设计,补齐 6 个 Qt 技术缺口示例

- docs/teaching/OUTLINE.md、slides/day1-5.html、index.html:替换此前自定义的
  4 天方案,严格对齐 docs/TRAINING_PLAN_2026.md「C++方向」Day1-5 课堂内容
  (Day6-10 为纯项目实作,不在教案范围)
- docs/teaching/examples/:官方方案书要求但仓库 p03/(wiki 抓取内容) 未覆盖的
  QSS/Model-View/JSON/QThread/QPropertyAnimation/QStateMachine 六个技术点,
  各补一个最小可运行示例 + README 教学文档,均已离屏验证跑通;手工维护,
  不属于 gen_part3.py 生成产物
- 根 CMakeLists.txt:接入 docs/teaching/examples 构建(BUILD_QT_PART 分支内),
  不改动生成器管理的 p01/p03 CMakeLists
- 任务卡改为目标/验收标准/基础知识参考三段式模板,custom.css 配套新增样式
- docs/teaching/PRETEST.md:10 题 10 分钟 C++ 摸底测验,验证教案假定的受众
  基础是否成立,并与 OUTLINE.md §0 的分层预案挂钩
This commit is contained in:
张宗平
2026-07-02 11:31:44 +08:00
parent 6bb38563b5
commit 83620c0cf5
23 changed files with 1862 additions and 1041 deletions
@@ -0,0 +1,51 @@
# QPropertyAnimation 动画框架 —— 教学补充示例
> 对应方案书「C++方向 Day4」:"QT 动画框架(QPropertyAnimation)与状态机实战"
> 里的动画部分(状态机部分见 [`../state_machine/`](../state_machine/README.md))。
> 仓库 `p03/` 的 wiki 抓取内容里没有动画相关代码,本示例是手工补写的教学补充,
> **不属于** `tools/gen_part3.py` 的生成产物。
## 概念
`QPropertyAnimation` 能直接对 Qt 的**属性系统**`Q_PROPERTY`,比如
`geometry``windowOpacity``pos`)做插值动画,不需要手写定时器 + 每帧计算
坐标/透明度再手动调用 `update()`。三个关键参数:
- `setStartValue()` / `setEndValue()` —— 起止值;
- `setDuration()` —— 动画时长(毫秒);
- `setEasingCurve()` —— 缓动曲线,控制"匀速/加速/回弹"等运动节奏
`QEasingCurve` 提供几十种预设曲线)。
动画对象默认不会自动播放,需要显式 `start()``start(QAbstractAnimation::DeleteWhenStopped)`
可以让动画播放完自动 `delete` 自己,不用手动管理生命周期。
## 代码走读
见 [`qt_property_animation.cpp`](qt_property_animation.cpp)
1. 一个按钮初始位置在左上角 `QRect(10, 10, 100, 30)`
2. `QPropertyAnimation` 绑定按钮的 `"geometry"` 属性,800ms 内从起始矩形动画到
右下角的 `QRect(180, 140, 120, 40)`(位置和大小同时变化);
3. `QEasingCurve::OutBounce` 让动画结束时有一个"回弹"的视觉效果,
直观体现"缓动曲线改变的是运动节奏,不是起止值";
4. 离屏验证等待 1100ms(比动画时长 800ms 多留 300ms 余量)再退出,确保动画
真的播放完整。
## 验证方式
```bash
QT_QPA_PLATFORM=offscreen tools/run_qt.sh qt_property_animation
```
有 X 环境直接运行可以看到按钮从左上角带回弹效果移动到右下角。
## 练习方向(供任务卡引用)
-`QEasingCurve::OutBounce` 换成 `QEasingCurve::Linear`/`InOutQuad`
对比运动节奏的差异;
- 再加一个 `QPropertyAnimation` 动画 `windowOpacity`(从 1.0 到 0.3),用
`QParallelAnimationGroup` 让位置动画和透明度动画同时播放。
## 参考
- Qt 官方文档:*Animation Framework*、*QPropertyAnimation*doc.qt.io,选读·需联网)
@@ -0,0 +1,38 @@
// ============================================================================
// qt_property_animation —— 教学补充示例(非 wiki 生成,手工维护)
// 用途:方案书「C++方向 Day4」要求的 QPropertyAnimation 动画框架,仓库 p03/
// 原有 wiki 抓取内容未覆盖这一点,故补一个最小示例。
// 配套文档:docs/teaching/examples/property_animation/README.md
// 离屏验证:QT_QPA_PLATFORM=offscreen tools/run_qt.sh qt_property_animation
// ============================================================================
#include <QApplication>
#include <QWidget>
#include <QPushButton>
#include <QPropertyAnimation>
#include <QTimer>
int main(int argc, char* argv[]) {
QApplication app(argc, argv);
QWidget window;
window.resize(320, 200);
auto* button = new QPushButton(QStringLiteral("看我移动"), &window);
button->setGeometry(10, 10, 100, 30);
// QPropertyAnimation 直接驱动 Qt 属性系统里的 geometry 属性,
// 不需要手写定时器 + 逐帧计算坐标。
auto* anim = new QPropertyAnimation(button, "geometry", &window);
anim->setDuration(800);
anim->setStartValue(QRect(10, 10, 100, 30));
anim->setEndValue(QRect(180, 140, 120, 40));
anim->setEasingCurve(QEasingCurve::OutBounce);
anim->start(QAbstractAnimation::DeleteWhenStopped);
window.show();
// 离屏/自动化验证:动画时长 800ms,额外等 300ms 确保播放完再退出
QTimer::singleShot(1100, &app, &QApplication::quit);
return app.exec();
}