This login concept belongs to enszgr. I liked it and I wanted to recreate it with QML. This only focuses on the visual parts of the login screen so don’t expect any functionality.
We have four main components for this animation:
A custom check box
A custom text box
A login message box
And a stack to put them all together.
Let’s start with our check box implementation.
It’s more of a tick than a check box as it, I’m assuming from the design, doesn’t need any click effects. To achieve the animation in the design we are going to use two Rectangles and states to manage their animation. First, let’s declare some properties that we will need for this.
I thought, since we won’t be handling any click events it makes more sense to individually set the width of the each line in the tick. And using those values I set the width and height of the Item using the formula a^2 + b^2 = c^2 for a triangle.
We have two lines in our check box and the short one has a rotation of 45 degrees and the long one has a rotation of -45 degrees. Using the same triangle formula, we can position the long one based on the short one’s size. Let’s implement our rectangles.
The initial widths of the rectangles are 0, since they will be in the unchecked state when first loaded. To control their check state, we can use State and Transition to animate and change their width.
Login Text Box
The text box is a quite simple looking white rectangle with centered text and placeholder text. It also has a vague drop shadow under it. And the check box goes over it.
To put the drop shadow under the text box, we use Item as our container and put DropShadow and Rectangle, which contains TextInput, in it.
The code is pretty straightforward. When you look at the code DropShadow is over Rectangle because we want to give it a lower z-index by default. We can control this with the z property too.
This puts together three text boxes and manages the animation.
You can find the whole source code on my GitHub account.