1. 课程导入
Qt Quick 是 Qt 面向现代 UI 的声明式框架，它以 QML 描述界面结构，以 JavaScript 组织交互逻辑，并通过场景图（Scene Graph）在 GPU 上完成高效渲染。很多初学者在第一次接触 Qt Quick 时，会被 PropertyAnimation、Behavior、Transition 等动画元素吸引，却忽略了动画背后真正决定流畅度的因素：渲染线程、场景图节点、批处理、纹理上传与帧同步。本课程的目标，就是帮助你把“会写动画”提升为“能写出稳定 60 FPS、低功耗、可维护的动画系统”。
一、学习目标：从能跑到跑得稳
本课程围绕三个层次展开。第一层是动画表达力：掌握属性动画、数值动画、组合动画、状态机与过渡，能够用 QML 原生机制描述复杂交互。第二层是渲染原理认知：理解 Qt Quick 如何把 QML 树转换为场景图，如何划分渲染线程与 GUI 线程，如何通过 OpenGL、Vulkan、Metal 或软件后端完成绘制。第三层是性能优化能力：能够定位掉帧、卡顿、内存增长与 GPU 占用异常，并给出可验证的优化方案。
NumberAnimation 修改 x 比修改 width 更便宜？为什么大量小图元会拖慢渲染？这些问题的答案，都指向同一套底层机制。
二、核心概念：动画、场景图与渲染管线
Qt Quick 的动画本质是属性插值。动画系统在每一帧根据时间曲线计算属性值，写入 QML 对象，触发绑定更新，最终反映到场景图节点。场景图是 Qt Quick 的渲染抽象层，它把 QML 元素转换为可批处理的节点，例如矩形、纹理、文字与裁剪节点。渲染线程负责遍历场景图、合并绘制调用、上传纹理并提交 GPU 命令。
理解下面这条链路，是后续所有优化的基础：
QML 属性变化
→ 绑定表达式重新求值
→ 场景图节点更新（updatePaintNode）
→ 渲染线程同步（sync）
→ 批处理与绘制调用（draw call）
→ GPU 光栅化与合成
→ 屏幕呈现（vsync）其中任何一环超时，都会表现为掉帧。GUI 线程忙于 JavaScript 计算，会阻塞属性更新；渲染线程忙于纹理上传，会拉长帧时间；GPU 填充率不足，则会出现大面积半透明或阴影导致的卡顿。因此，优化不是“调小动画时长”，而是找到链路中的瓶颈并针对性处理。
三、方法流程：一条可复用的优化路线
面对一个动画卡顿问题，建议按以下顺序推进，避免“凭感觉改代码”。
- 建立基线：在目标设备上运行，记录平均帧时间、最差帧时间、GPU 占用与内存曲线。没有基线，就无法判断优化是否有效。
- 定位线程：用 QML Profiler 查看 GUI 线程与渲染线程的时间分布。若 GUI 线程长任务多，优先检查 JavaScript 与绑定；若渲染线程长，检查节点数量与纹理。
- 缩小范围：通过隐藏部分 Item、禁用动画、替换图片资源等方式做二分排查，找到真正昂贵的元素。
- 选择手段：根据瓶颈选择 Animator、Layer、裁剪、缓存、降低更新频率或改用 ShaderEffect。
- 回归验证：在相同场景下重新测量，确认帧时间下降且视觉无明显退化。
四、案例场景：一个列表滚动动画的优化过程
假设有一个包含 200 个卡片的 ListView，每个卡片带有阴影、圆角和图标，滚动时出现明显抖动。初步观察发现，滚动本身由 Flickable 驱动，但每帧都在重新计算阴影与圆角。优化时可以先给卡片设置 layer.enabled: true，把静态内容缓存为纹理；再把阴影改为预渲染图片或 MultiEffect；最后确认 cacheBuffer 与 reuseItems 配置合理。经过这三步，帧时间通常能从 30 ms 以上降到 16 ms 以内。
五、常见误区与复盘
| 误区 | 表现 | 正确做法 |
|---|---|---|
| 动画时长越短越流畅 | 视觉突兀，帧率并未提升 | 先保证帧时间达标，再调整缓动与时长 |
| 所有元素都加 Layer | 显存上涨，小元素反而更慢 | 只对复杂且静态的内容启用缓存 |
| 只看桌面端表现 | 嵌入式设备上严重掉帧 | 始终以目标硬件为验收环境 |
| 用 JavaScript 每帧计算布局 | GUI 线程阻塞，绑定频繁失效 | 用声明式绑定与 Animator 替代手写循环 |
本课程后续将沿着“动画表达 → 场景图原理 → 渲染线程 → 性能度量 → 实战优化”的路线逐步展开。你不需要一次记住所有 API，但需要建立一条清晰的因果链：每一次属性变化，都会沿着这条链路传导到屏幕；每一次优化，都应该在这条链路上找到对应的着力点。