QML 呼吸进度条:呼吸节奏与多层光晕

📅 2026/8/25 16:01:11
QML 呼吸进度条:呼吸节奏与多层光晕
目录Demo 呼吸进度条演示代码关键逻辑解析运行验证扩展复用方向工程下载呼吸进度条给填充加「呼吸」节奏——填充颜色和透明度按 1.5 秒周期缓慢变化,像呼吸灯一样一明一暗。光晕呼吸还在填充外层叠加两层光晕,呼吸时光晕向外扩散。这种形式在待机状态、后台任务、低强度提示这类场景里很合适,比脉冲进度条柔和得多。Demo 呼吸进度条两种呼吸进度条同屏排开:基础呼吸(暗蓝到亮蓝青渐变 + 透明度变化)、光晕呼吸(紫色填充 + 两层外扩光晕),底部一根滑杆统一控制进度。QML 用SequentialAnimation配合Easing.InOutSine缓动做呼吸节奏,颜色用 HSL 按呼吸值偏移。涉及的核心知识点:SequentialAnimation 两个 NumberAnimation 拼呼吸循环InOutSine 缓动让呼吸自然HSL 色相和亮度按呼吸值偏移多层光晕用 anchors.margins 负值外扩光晕透明度按呼吸值缩放以下演示代码来自qml_progress/Demo_BreathBar.qml,为便于阅读,只展示了关键代码。演示代码