Sprite animation from sprite sheet using QML

Recently I was going through my old code, found code for sprite animation from sprite sheet. I wondered how same can be done with QML.

After little playing with QML and little bit of google. I came up with following code.

Following code is for my sprite QML element in Sprite.qml file. Here main trick is to use clip property of Item element. Which clips own painting, as well as the painting of its children, to its bounding rectangle.

Item{
    id:sprite
    clip: true
    property alias running: timer.running;
    property int frame:0
    property int frameCount: 0;
    property alias source:image.source

    Image{
         id:image
         x:-sprite.width*sprite.frame
     }

    Timer {
        id:timer
        interval: 200; running: false; repeat: true
        onTriggered: {
            nextFrame();
        }
    }

    function nextFrame() {
        sprite.frame = ++sprite.frame  % sprite.frameCount
    }
}

Following code shows how we can use above code.

Rectangle {
    width: 400
    height: 100

    Sprite {
        x:150
        width: 64;height: 64
        source: "dragon.png"
        running: true
        frameCount: 5
    }
}

Following is demo from above code.