Location>code7788 >text

Qml implement water wave progress animation bar

Popularity:190 ℃/2024-09-19 11:39:50

[Writing in front]

I recently saw a very interesting animation effect:Water wave progress animation.

It's interesting to learn about the implementation ideas.

But the original isHTML + CSSI'm using theQml, there are some tips to share~


[Text Begins]

As usual, let's start with the results:

image

The most basic is nothing more than four parts:

1、Round water tank

2. Water Wave

3. Percentage figures

4. Progress bar

Water wave effect is the most important focus of the water wave, in fact, this water wave is a blindfold, just draw a picture you will understand.

It's just a rounded square that keeps rotating and rising and falling, giving the user a visual sense of water waves~

image

Of course, we also need to crop out the excess, so here we need to resort to theOpacityMask

image

OpacityMask The principle is that theSource homologousMaskSource The transparent part in the

But we can't tell them directly.Source section ( blue rounded rectangle ), you need to move it down first and then crop to get it:

image

Next, use a circle as theMaskSource You can cut out the shape below:

image

Finally, just let the blue rounded rectangle rotate infinitely:

    Item {
        id: wave
        clip: true
        : parent
        visible: false

        Rectangle {
            y:  * 1.1 * (1 - )
            width:  * 4
            height:  * 4
            : 
            radius:  * 1.5
            color: 
            rotation: 45

            NumberAnimation on rotation {
                from: 0
                to: 360
                running:  < 1.0
                duration:  * 1000
                loops: 
            }
        }
    }

As for the progress bar and text it's very simple, just look directly at the source code.


[Conclusion]

And finally: project link (more star yah...). ⭐_⭐):

Github Address:/mengps/QmlControls/tree/master/WaveProgress