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 的分层预案挂钩
QPropertyAnimation 动画框架 —— 教学补充示例
对应方案书「C++方向 Day4」:"QT 动画框架(QPropertyAnimation)与状态机实战" 里的动画部分(状态机部分见
../state_machine/)。 仓库p03/的 wiki 抓取内容里没有动画相关代码,本示例是手工补写的教学补充, 不属于tools/gen_part3.py的生成产物。
概念
QPropertyAnimation 能直接对 Qt 的属性系统(Q_PROPERTY,比如
geometry、windowOpacity、pos)做插值动画,不需要手写定时器 + 每帧计算
坐标/透明度再手动调用 update()。三个关键参数:
setStartValue()/setEndValue()—— 起止值;setDuration()—— 动画时长(毫秒);setEasingCurve()—— 缓动曲线,控制"匀速/加速/回弹"等运动节奏 (QEasingCurve提供几十种预设曲线)。
动画对象默认不会自动播放,需要显式 start();start(QAbstractAnimation::DeleteWhenStopped)
可以让动画播放完自动 delete 自己,不用手动管理生命周期。
代码走读
- 一个按钮初始位置在左上角
QRect(10, 10, 100, 30); QPropertyAnimation绑定按钮的"geometry"属性,800ms 内从起始矩形动画到 右下角的QRect(180, 140, 120, 40)(位置和大小同时变化);QEasingCurve::OutBounce让动画结束时有一个"回弹"的视觉效果, 直观体现"缓动曲线改变的是运动节奏,不是起止值";- 离屏验证等待 1100ms(比动画时长 800ms 多留 300ms 余量)再退出,确保动画 真的播放完整。
验证方式
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,选读·需联网)