[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 + CSS
I'm using theQml
, there are some tips to share~
[Text Begins]
As usual, let's start with the results:
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~
Of course, we also need to crop out the excess, so here we need to resort to theOpacityMask
:
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:
Next, use a circle as theMaskSource
You can cut out the shape below:
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