If you prefer to work with QML instead of C++, Qt also provides similar features in Qt Quick that allow you to easily animate a GUI element with the minimum lines of code. In this example, we will learn how to achieve this with QML.
main.qml
file looks like:import QtQuick 2.3 import QtQuick.Window 2.2 Window { visible: true width: 480; height: 320; Rectangle { id: background; anchors.fill: parent; color: "blue"; } Text { text: qsTr("Hello World"); anchors.centerIn: parent; color: "white"; font.pointSize: 15; } }
Rectangle
object:Rectangle { id: background; anchors.fill: parent; color: "blue"; SequentialAnimation on color { ColorAnimation { to: "yellow"; duration: 1000 } ColorAnimation { to: "red"; duration: 1000 } ColorAnimation { to: "blue"; duration: 1000 } loops: Animation.Infinite; } }
Text { text: qsTr("Hello World"); anchors.centerIn: parent; color: "white"; font.pointSize: 15; SequentialAnimation on opacity { NumberAnimation { to: 0.0; duration: 200} NumberAnimation { to: 1.0; duration: 200} loops: Animation.Infinite; } }
Text { text: qsTr("Hello World"); anchors.centerIn: parent; color: "white"; font.pointSize: 15; SequentialAnimation on opacity { NumberAnimation { to: 0.0; duration: 200} NumberAnimation { to: 1.0; duration: 200} loops: Animation.Infinite; } NumberAnimation on rotation { from: 0; to: 360; duration: 2000; loops: Animation.Infinite; } }
PRESSED
state and another called the RELEASED
state. Then, set the default state to RELEASED
:Rectangle { id: background; anchors.fill: parent; state: "RELEASED"; states: [ State { name: "PRESSED" PropertyChanges { target: background; color: "blue"} }, State { name: "RELEASED" PropertyChanges { target: background; color: "red"} } ] }
Rectangle
object so that we can click on it:MouseArea { anchors.fill: parent; onPressed: background.state = "PRESSED"; onReleased: background.state = "RELEASED"; }
Rectangle
object: transitions: [ Transition { from: "PRESSED" to: "RELEASED" ColorAnimation { target: background; duration: 200} }, Transition { from: "RELEASED" to: "PRESSED" ColorAnimation { target: background; duration: 200} } ]
The main window consists of a blue rectangle and static text that says Hello World
.
We want the background color to change from blue to yellow, then to red, and back to blue in a loop. This can be easily achieved using the color animation type in QML.
What we're doing at Step 3 is basically creating a sequential animation group within the Rectangle
object, then creating three different color animations within the group, which will change the color of the object every 1,000 milliseconds (1 second). We also set the animations to loop infinitely.
In Step 4, we want to use the number animation to animate the alpha value of the static text. We created another sequential animation group within the Text
object and created two number animations to animate the alpha value from 0 to 1 and back. Then, we set the animations to loop infinitely.
Then in Step 5, we rotate the Hello World
text by adding another number animation to it.
In Step 6, we wanted to make the Rectangle
object change from one color to another when we click on it. When the mouse is released, the Rectangle
object will change back to its initial color. To achieve that, first we need to define the two states, one called the PRESSED
state and another called the RELEASED
state. Then, we set the default state to RELEASED
.
Now, when you compile and run the example, the background will instantly change color to blue when pressed and change back to red when the mouse is released. That works great and we can further enhance it by giving it a little transition when switching color. This can be easily achieved by adding transitions to the Rectangle
object.
In QML, there are eight different types of property animation you can use:
Just like the C++ version, these animations can also be grouped together in an animation group to play the animations in sequence or in parallel. You can also control the animations using easing curves and determine when to play these animations using state machines, just like what we have done in the previous section.
3.135.198.174