In this recipe, we will learn how to animate the properties of our GUI widgets using the animator feature provided by QML.
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; } }
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; }
Add an easing curve to the scale animator:
ScaleAnimator { target: myBox; from: 5; to: 1; duration: 2000; easing.type: Easing.InOutElastic; ...