Animating widget properties using animators

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

How to do it…

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;
     }
   }

2. Add a rotation animator and set the running value in the parallel animation group, but not in any of the individual animators:

   ParallelAnimation {
     ScaleAnimator {
       target: myBox;
       from: 5;
       to: 1;
       duration: 2000;
     }
     RotationAnimator {
       target: myBox;
       from: 0;
       to: 360;
       duration: 1000;
     }
     running: true;
   }

3. Add an easing curve to the scale animator:

   ScaleAnimator {
     target: myBox;
     from: 5;
     to: 1;
     duration: 2000;
     easing.type: Easing.InOutElastic;
   ...