Let's learn how to add animation to your Qt Quick application by following these steps:

1. Once again, we will start everything from scratch. Therefore, create a new Qt Quick application – Empty project in Qt Creator and create the MainForm.ui.qml file.
2. Open up MainForm.ui.qml and go to the Imports tab in the Library window and add a Qt Quick module called QtQuick.Controls to your project.
3. After that, you will see a new category appear in the QML Types tab called Qt Quick – Controls, which contains many new widgets that can be placed on the canvas.
4. Next, drag three button widgets to the canvas and set their height to 45. Then, go to the Layout tab on the Properties window and enable both the left and right anchors for all the three button widgets. Make sure the target for the anchors are set to Parent and the margins remain as 0. This will make the buttons resize horizontally according to the width of the main window. After that, set the y value of the first button to 0, the second to 45, and the third to 90. The user interface should now look like this:

5. Now, open up qml.qrc with the editor and add fan.png to the project as follows:

6. Then, add two mouse area widgets to the canvas. After that, drag a Rectangle widget and an Image widget on the canvas. Parent the rectangle and image to the mouse areas we have just added before this.
7. Set the color of the rectangle to #0000ff and apply fan.png to the image widget. Your user interface should now look like this:

8. After that, export all the widgets in your MainForm.ui.qml as alias properties of the root item by clicking on the icons located to the right of the widget name as follows:

9. Next, we will apply animation and logic to the user interface, but we won't be doing it in MainForm.ui.qml. Instead, we will do it all in main.qml.
10. In main.qml, remove the default code for the mouse area and add in a width and height for the window so that we get more space to preview, as follows:

import QtQuick 2.5
import QtQuick.Window 2.2
Window {
    visible: true
    width: 480
    height: 550
    MainForm {
        anchors.fill: parent
    }
}

11. After that, add the following code that defines the behavior of the buttons in the MainForm widget:

button1 {
    Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
    onClicked: {
        button1.y = button1.y + (45 * 3)
    }
}
button2 {
    Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
    onClicked: {
        button2.y = button2.y + (45 * 3)
    }
}

12. In the following code, we continue to define button3:

button3 {
    Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
    onClicked: {
        button3.y = button3.y + (45 * 3)
    }
}

13. Then, follow this with the behavior of the fan image and the mouse area widget it is attached to as follows:

fan {
    RotationAnimation on rotation {
        id: anim01
        loops: Animation.Infinite
        from: 0
        to: -360
        duration: 1000
    }
}

14. In the following code, we then define mouseArea1:

mouseArea1 {
    onPressed: {
        if (anim01.paused)
            anim01.resume()
        else
            anim01.pause()
    }
}

15. Last but not least, add the behavior of the rectangle and the mouse area widget it's attached to as follows:

rectangle2 {
    id: rect2
    state: "BLUE"
    states: [
        State {
            name: "BLUE"
            PropertyChanges {
                target: rect2
                color: "blue"
            }
        },

16. In the following code, we continue to add the RED state:

        State {
            name: "RED"
            PropertyChanges {
                target: rect2
                color: "red"
            }
        }
    ]
}

17. We then finish the code by defining mouseArea2 as follows:

mouseArea2 {
    SequentialAnimation on x {
        loops: Animation.Infinite
        PropertyAnimation { to: 150; duration: 1500 }
        PropertyAnimation { to: 50; duration: 500 }
    }
    onClicked: {
        if (rect2.state == "BLUE")
            rect2.state = "RED"
        else
            rect2.state = "BLUE"
    }
}

18. If you compile and run the program now, you should see three buttons at the top of the window and a moving rectangle at the bottom left, followed by a spinning fan at the bottom right, as demonstrated in the following screenshot. If you click any of the buttons, they will move slightly downward with a nice, smooth animation. If you click on the rectangle, it will change color from blue to red. Meanwhile, the fan image will pause its animation if you click on it while it's animating, and it will resume the animation if you click on it again: