States, transitions, and animations in QML

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.

How to do it…

  1. First we will create a new Qt Quick Application project and set up our user interface like so:
    How to do it…
  2. Here is what my 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;
  }
}
  3. Add the color animation to the 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;
  }
}
  4. Then, add a number animation to the text object:
    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;
  }
}
  5. Next, add another number animation to it:
    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;
  }
}
  6. Define two states, one called the 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"}
    }
  ]
}
  7. After that, create a mouse area within the Rectangle object so that we can click on it:
    MouseArea {
  anchors.fill: parent;
  onPressed: background.state = "PRESSED";
  onReleased: background.state = "RELEASED";
}
  8. Add some transitions to the Rectangle object: 
    transitions: [
  Transition {
    from: "PRESSED"
    to: "RELEASED"
    ColorAnimation { target: background; duration: 200}
  },
  Transition {
    from: "RELEASED"
    to: "PRESSED"
    ColorAnimation { target: background; duration: 200}
  }
]

How it works...

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.

There's more…

In QML, there are eight different types of property animation you can use:

  • Anchor animation: Animates changes in anchor values
  • Color animation: Animates changes in color values
  • Number animation: Animates changes in qreal-type values
  • Parent animation: Animates changes in parent values
  • Path animation: Animates an item along a path
  • Property animation: Animates changes in property values
  • Rotation animation: Animates changes in rotation values
  • Vector3d animation: Animates changes in QVector3d values

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.157.142