To learn how to render animation in QML, follow this example:

1. Create a Qt Quick Application - Empty project. Then, right-click on the Resources icon under our project panel and add tux.png into our project's resource:

2. Open up main.qml and change the window size to 650 x 650. We will also add id to the Window item and name it window:

Window {
    id: window
    visible: true
    width: 650
    height: 650

3. Add the following code inside the Window item:

property int frame: 0;
onAfterRendering: { frame++; }

Timer {
    id: timer
    interval: 1000
    running: true
    repeat: true
    onTriggered: { frame = 0; }
}

4. Right after that, add Repeater and Image under it:

Repeater {
        model: 10
        delegate:
            Image {
                id: tux
                source: "tux.png"
                sourceSize.width: 50
                sourceSize.height: 60
                width: 50
                height: 60
                smooth: false
                antialiasing: false
                asynchronous: true

5. We will proceed and add the following code:

property double startX: Math.random() * 600;
property double startY: Math.random() * 600;
property double endX: Math.random() * 600;
property double endY: Math.random() * 600;
property double speed: Math.random() * 3000 + 1000;

RotationAnimation on rotation{
    loops: Animation.Infinite
    from: 0
    to: 360
    duration: Math.random() * 3000 + 1000;
}

6. Once you are done with that, add the following code at the bottom of the previous code:

SequentialAnimation {
    running: true
    loops: Animation.Infinite
    ParallelAnimation {
        NumberAnimation {
            target: tux
            property: "x"
            from: startX
            to: endX
            duration: speed
            easing.type: Easing.InOutQuad
    }

7. The preceding code animates the x property of the image. We need another NumberAnimation property to animate the y property:

    NumberAnimation {
        target: tux
        property: "y"
        from: startY
        to: endY
        duration: speed
        easing.type: Easing.InOutQuad
    }
}

8. After that, we repeat the entire code of the ParallelAnimation, except this time, we swap the from and to values, like so:

ParallelAnimation {
    NumberAnimation {
        target: tux
        property: "x"
        from: endX
        to: startX
        duration: speed
        easing.type: Easing.InOutQuad
    }

9. The same goes for NumberAnimation for the y property:

    NumberAnimation {
        target: tux
        property: "y"
        from: endY
        to: startY
        duration: speed
        easing.type: Easing.InOutQuad
    }
}

10. Then, we add a Text item for displaying the frame rate of our application:

Text {
    property int frame: 0
    color: "red"
    text: "FPS: 0 fps"
    x: 20
    y: 20
    font.pointSize: 20

11. Let's add Timer under Text and update the frame rate display on every second:

    Timer {
        id: fpsTimer
        repeat: true
        interval: 1000
        running: true
        onTriggered: {
            parent.text = "FPS: " + frame + " fps"
        }
    }
}

12. If we build and run the program now, we will be able to see several penguins moving around the screen with a steady 60 fps:

13. Let's go back to our code and change the model property of the Repeater item to 10000. Build and run the program again; you should see that your window is full of moving penguins and that the frame rate has significantly dropped to roughly 29 fps, which is not too bad, considering the amount of penguins we have:

14. Then, go back to our source code and comment out both of the sourceSize properties. We also set the smooth and antialiasing properties to false, while setting the asynchronous property to false:

Image {
    id: tux
    source: "tux.png"
    //sourceSize.width: 50
    //sourceSize.height: 60
    width: 50
    height: 60
    smooth: true
    antialiasing: true
    asynchronous: false

15. Let's build and run the program again. This time, the frame rate dropped slightly to 22 fps, but the penguins look smoother and are of a better quality, even when moving: