张宗平
83620c0cf5
- 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 的分层预案挂钩
52 lines
2.3 KiB
Markdown
52 lines
2.3 KiB
Markdown
# 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，选读·需联网）
|