news 2026/8/19 12:30:31

QML 双波进度条:错相双层与对向双层

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
QML 双波进度条:错相双层与对向双层

目录

    • Demo 双波进度条
      • 演示代码(错相双层)
      • 关键逻辑解析(错相双层)
      • 演示代码(对向双层)
      • 关键逻辑解析(对向双层)
    • 运行验证
    • 扩展复用方向
    • 工程下载

双波进度条在水波进度条基础上叠加两层波浪——两层波可以同向流动但相位错开(错相双层),也可以反向流动交叉扰动(对向双层)。这种形式比单层水波更有层次感,两层波峰交错或交叉时形成可见的双层纹理,视觉上更丰富。QML 用 Canvas 画两层波形路径,配合NumberAnimation驱动time让两层波持续流动。

Demo 双波进度条

两种双波进度条同屏排开:错相双层(蓝色,两层同向相位错开)、对向双层(绿色,两层反向交叉),底部一根滑杆统一控制进度。

涉及的核心知识点:

  • 圆形裁剪限制波形范围
  • 水位基线映射进度
  • 两层波相位错开 π 的 0.7
  • 两层波反向流动交叉
  • 两层透明色叠加
  • 两层动画速度不同

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

演示代码(错相双层)

先看两层波同向、相位错开的结构:

FadeInAnimation { ColumnLayout { a
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/19 12:29:41

从贾跃亭到FF:技术理想主义与汽车工业规律的碰撞与启示

1. 从“为梦想窒息”到“下周回国”:一个符号的诞生与争议聊起中国新能源汽车的草莽时代,贾跃亭和他的法拉第未来(Faraday Future,简称FF)是一个绕不开的名字。他不是第一个造车的互联网人,但绝对是把“互联…

作者头像 李华
网站建设 2026/8/19 12:29:36

DeepSeek 大幅涨价:性价比不再?Harness 生态能否破局

同一个 DeepSeek,五种价格要理解 DeepSeek 涨价影响,需厘清其销售渠道,包括官方 API、OpenRouter 等模型聚合平台、云平台、OpenCode Go 一类订阅服务和自行部署开放权重。这些渠道使官方涨价不代表市场所有服务同幅上涨。截至 8 月 18 日&am…

作者头像 李华
网站建设 2026/8/19 12:29:34

Ubuntu 24.04 Certbot 自动化SSL证书配置指南

Ubuntu 24.04 Certbot 自动化SSL证书配置指南简介: Let’s Encrypt 是一个免费、开放、自动化的证书颁发机构(CA),由非营利组织 Internet Security Research Group(ISRG)运营。它提供有效期 90 天的免费 SS…

作者头像 李华