Qml 实现水波进度动画条

【写在前面】

最近看到一个非常有趣的动画效果:水波进度动画。

学习了一下实现思路,觉得很有意思。

不过原版是 HTML + CSS,我这里用的是 Qml,有一些小技巧,分享给大家~


【正文开始】

老样子,先来看看效果图:

最基础的无非就是四个部分:

1、圆形水缸

2、水波

3、百分比数字

4、进度条

水波效果最重点的就是水波,其实这个水波就是个障眼法罢了,画张图你们就明白了。

它就是一个圆角正方形,一直在旋转和上升下降,让用户有一种水波的视觉感~

当然,我们还需要将多余的部分裁剪掉,因此这里需要借助 OpacityMask

OpacityMask 原理是将 Source 对应 MaskSource 中的透明部分掩盖掉。

但我们不能直接透出 Source 部分 ( 蓝色圆角矩形 ),需要将它先下移,然后裁剪得到:

接着,使用一个圆形作为 MaskSource 即可裁剪出下面的形状:

最后,让蓝色圆角矩形无限旋转即可:

javascript 复制代码
    Item {
        id: wave
        clip: true
        anchors.fill: parent
        visible: false

        Rectangle {
            y: mask.height * 1.1 * (1 - root.value)
            width: root.radius * 4
            height: root.radius * 4
            anchors.horizontalCenter: parent.horizontalCenter
            radius: root.radius * 1.5
            color: root.waveColor
            rotation: 45

            NumberAnimation on rotation {
                from: 0
                to: 360
                running: root.value < 1.0
                duration: root.waveSpeed * 1000
                loops: NumberAnimation.Infinite
            }
        }
    }

至于进度条和文字就非常简单,直接看源码即可。


【结语】

最后:项目链接(多多star呀..⭐_⭐):

Github 地址:https://github.com/mengps/QmlControls/tree/master/WaveProgress

相关推荐
会飞的胖达喵1 小时前
Qt Widgets 应用程序核心类 - QApplication 详解
qt
大橘2 小时前
【qml-11】Quick3D实现机器人欧拉旋转、拖动视角
qt·3d·机器人·qml
枫叶丹42 小时前
【Qt开发】输入类控件(三)-> QComboBox
开发语言·qt
攻城狮7号4 小时前
【AI时代速通QT】第八节:Visual Studio与Qt-从项目迁移到多版本管理
c++·qt·跨平台·visual studio·qt vs tools
郝学胜-神的一滴4 小时前
QAxios研发笔记(一):在Qt环境下,构建Promise风格的Get请求接口
开发语言·c++·spring boot·qt·ajax·前端框架·软件工程
2025年一定要上岸8 小时前
【日常学习】UI自动化自定义异常类
运维·ui·自动化
无敌最俊朗@9 小时前
C++ 序列容器深度解析:vector、deque 与 list
开发语言·数据结构·数据库·c++·qt·list
Larry_Yanan10 小时前
QML学习笔记(十五)QML的信号处理器(MouseArea)
c++·笔记·qt·学习·ui
Larry_Yanan12 小时前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
轩情吖13 小时前
Qt常用控件之QSpinBox
开发语言·c++·qt·控件·桌面级开发·qspinbox·微调框