目录Demo 粒子进度条演示代码（粒子填充）关键逻辑解析（粒子填充）演示代码（末端火花）关键逻辑解析（末端火花）演示代码（气泡上升）关键逻辑解析（气泡上升）运行验证扩展复用方向工程下载粒子进度条在普通渐变填充之上叠加一层 Canvas 粒子动画——粒子沿填充区流动闪烁、火花从进度尖端喷散、气泡从底部持续上升。这种效果在加载、充能、能量蓄积这类场景里很有动感，比静态渐变进度条生动得多。Demo 粒子进度条三种粒子进度条同屏排开：粒子填充（蓝渐变 + 白粒子流动）、末端火花（橙渐变 + 黄火花喷散）、气泡上升（绿渐变 + 白气泡上升），底部一根滑杆统一控制进度。QML 用 Canvas 的arc画粒子，配合Component.onCompleted初始化粒子数组，NumberAnimation驱动time属性让粒子持续运动。涉及的核心知识点：粒子数组在 Component.onCompleted 初始化粒子位置随 time 循环计算正弦函数做位置波动和大小闪烁火花从尖端沿角度喷散气泡从底部循环上升透明度随生命周期变化以下演示代码来自qml_progress/Demo_ParticleBar.qml，为便于阅读，只展示了关键代码。 QML 粒子进度条：Canvas 模拟粒子流动与火花喷散
目录Demo 粒子进度条演示代码（粒子填充）关键逻辑解析（粒子填充）演示代码（末端火花）关键逻辑解析（末端火花）演示代码（气泡上升）关键逻辑解析（气泡上升）运行验证扩展复用方向工程下载粒子进度条在普通渐变填充之上叠加一层 Canvas 粒子动画——粒子沿填充区流动闪烁、火花从进度尖端喷散、气泡从底部持续上升。这种效果在加载、充能、能量蓄积这类场景里很有动感，比静态渐变进度条生动得多。Demo 粒子进度条三种粒子进度条同屏排开：粒子填充（蓝渐变 + 白粒子流动）、末端火花（橙渐变 + 黄火花喷散）、气泡上升（绿渐变 + 白气泡上升），底部一根滑杆统一控制进度。QML 用 Canvas 的arc画粒子，配合Component.onCompleted初始化粒子数组，NumberAnimation驱动time属性让粒子持续运动。涉及的核心知识点：粒子数组在 Component.onCompleted 初始化粒子位置随 time 循环计算正弦函数做位置波动和大小闪烁火花从尖端沿角度喷散气泡从底部循环上升透明度随生命周期变化以下演示代码来自qml_progress/Demo_ParticleBar.qml，为便于阅读，只展示了关键代码。 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
