Animating widget properties using animators

In this recipe, we will learn how to animate the properties of our GUI widgets using the animator feature that’s provided by QML.

How to do it…

Animating QML objects is really easy if you perform the following steps:

1. Create a Rectangle object and add a scale animator to it:

   Rectangle {
       id: myBox;
       width: 50;
       height: 50;
       anchors.horizontalCenter: parent.horizontalCenter;
       anchors.verticalCenter: parent.verticalCenter;
       color: "blue";
       ScaleAnimator {
           target: myBox;
           from: 5;
           to: 1;
           duration: 2000;
           running: true...