Qt Quick 2 animation example

import QtQuick 2.0
import QtMultimedia 5.0

Rectangle {
    id: window
    width: 1024
    height: 768

    property bool vis: false

    Item {

        Repeater {

            model: 500

            Rectangle {
                visible: window.vis
                width: index
                height: index
                border.width: 1
                color: "yellow"
                z: 0
            }
        }
    }

    Rectangle {
        id: overlayRect
        anchors.fill: parent

        color: "black"
    }


    Column {

        Rectangle {
            id: r

            color: "black"
            width: 1024
            height: 733

//            VideoOutput {
//                id: video
//                anchors.fill: parent
//                source: player
//            }


            Canvas {
                id: canvas
                anchors.fill: parent
                antialiasing: true

                onPaint: {
                    var context = canvas.getContext("2d")
                    context.clearRect(0, 0, width, height)
                    context.strokeStyle = "black"
                    context.path = pathAnim.path
                    context.stroke()
                }
            }

            SequentialAnimation {
                running: true
                loops: -1

                PauseAnimation { duration: 1000 }
                PathAnimation {
                    id: pathAnim

                    duration: 2000
                    easing.type: Easing.InQuad

                    target: box
                    orientation: PathAnimation.RightFirst
                    anchorPoint: Qt.point(box.width/2, box.height/2)
                    path: Path {
                        startX: 50; startY: 50

                        PathCubic {
                            x: window.width - 50
                            y: window.height - 50

                            control1X: x; control1Y: 50
                            control2X: 50; control2Y: y
                        }

                        onChanged: canvas.requestPaint()
                    }
                }
            }

            Rectangle {
                id: box

                x: 25; y: 25
                width: 50; height: 50
                border.width: 1
                antialiasing: true

                Text {
                    anchors.centerIn: parent
                    text: "Box"
                }
            }
        }


        Row {
            id: buttons

            width: window.width
            height: 35
            spacing: 5

            Rectangle {
                id: triggerButton
                color: "black"

                width: 60
                height: 30

                Text { text: "Trigger"; color: "white"; anchors.centerIn: parent }
                MouseArea { anchors.fill: parent; onClicked: {  window.vis=(!window.vis);} }
            }

            Rectangle {
                id: exitButton
                color: "black"

                width: 60
                height: 30

                Text { text: "Exit"; color: "white"; anchors.centerIn: parent }
                MouseArea { anchors.fill: parent; onClicked: { Qt.quit(); } }
            }

        }
    }

//    MediaPlayer {
//        id: player
//        source: "file:///home/user/sample.mpg"
//        autoPlay: false
//    }
}