企业官网建设流程全解析

呼吸进度条给填充加「呼吸」节奏——填充颜色和透明度按 1.5 秒周期缓慢变化，像呼吸灯一样一明一暗。光晕呼吸还在填充外层叠加两层光晕，呼吸时光晕向外扩散。这种形式在待机状态、后台任务、低强度提示这类场景里很合适，比脉冲进度条柔和得多。

Demo 呼吸进度条

两种呼吸进度条同屏排开：基础呼吸（暗蓝到亮蓝青渐变 + 透明度变化）、光晕呼吸（紫色填充 + 两层外扩光晕），底部一根滑杆统一控制进度。

QML 用SequentialAnimation配合Easing.InOutSine缓动做呼吸节奏，颜色用 HSL 按呼吸值偏移。涉及的核心知识点：

• SequentialAnimation 两个 NumberAnimation 拼呼吸循环
• InOutSine 缓动让呼吸自然
• HSL 色相和亮度按呼吸值偏移
• 多层光晕用 anchors.margins 负值外扩
• 光晕透明度按呼吸值缩放

以下演示代码来自qml_progress/Demo_BreathBar.qml，为便于阅读，只展示了关键代码。

演示代码