qml写一个水波纹进度条

以下是一个简单的 QML 水波纹进度条实现：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.15

Item {
    width: 200
    height: 200

    property real progress: 0.5 // 进度值
    property real waveAmplitude: 10 // 水波纹振幅
    property real waveSpeed: 2 // 水波纹速度
    property real waveOffset: 0 // 水波纹偏移量

    Shape {
        id: waveShape
        anchors.centerIn: parent
        ShapePath {
            id: wavePath
            strokeColor: "transparent"
            fillColor: "lightblue"
            PathQuad { x: -50; y: 50 }
            PathQuad { x: 0; y: -50 }
            PathQuad { x: 50; y: 50 }
            PathQuad { x: 100; y: -50 }
            PathQuad { x: 150; y: 50 }
            PathQuad { x: 200; y: -50 }
        }
    }

    Rectangle {
        id: maskRect
        anchors.fill: parent
        color: "white"
        opacity: progress
        clip: true // 开启裁剪
    }

    Timer {
        interval: 16
        running: true
        repeat: true
        onTriggered: {
            waveOffset += waveSpeed
            wavePath.pathElements[0].y = waveAmplitude * Math.sin((waveOffset + 0) / 20)
            wavePath.pathElements[1].y = waveAmplitude * Math.sin((waveOffset + 40) / 20)
            wavePath.pathElements[2].y = waveAmplitude * Math.sin((waveOffset + 80) / 20)
            wavePath.pathElements[3].y = waveAmplitude * Math.sin((waveOffset + 120) / 20)
            wavePath.pathElements[4].y = waveAmplitude * Math.sin((waveOffset + 160) / 20)
            wavePath.pathElements[5].y = waveAmplitude * Math.sin((waveOffset + 200) / 20)
        }
    }
}

使用 `Rectangle` 作为遮罩层，根据 `progress` 属性设置不透明度实现进度条效果；使用 `Shape` 和 `ShapePath` 实现水波纹效果，并通过 `Timer` 定时更新水波纹偏移量和振幅。