Qml 實現水波進度動畫條

梦起丶發表於2024-09-13
動畫

【寫在前面】

最近看到一個非常有趣的動畫效果：水波進度動畫。

學習了一下實現思路，覺得很有意思。

不過原版是 HTML + CSS，我這裡用的是 Qml，有一些小技巧，分享給大家~

【正文開始】

老樣子，先來看看效果圖：

image

最基礎的無非就是四個部分：

1、圓形水缸

2、水波

3、百分比數字

4、進度條

水波效果最重點的就是水波，其實這個水波就是個障眼法罷了，畫張圖你們就明白了。

它就是一個圓角正方形，一直在旋轉和上升下降，讓使用者有一種水波的視覺感~

image

當然，我們還需要將多餘的部分裁剪掉，因此這裡需要藉助 OpacityMask：

image

OpacityMask 原理是將 Source 對應 MaskSource 中的透明部分掩蓋掉。

但我們不能直接透出 Source 部分 ( 藍色圓角矩形 )，需要將它先下移，然後裁剪得到：

image

接著，使用一個圓形作為 MaskSource 即可裁剪出下面的形狀：

image

最後，讓藍色圓角矩形無限旋轉即可：

    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

相關文章