import QtQuick 2.0

Rectangle {
    id: test
    color: "black"
    width: 1280
    height: 720

    property int step: 0

    MouseArea{
        anchors.fill: test
        onClicked: test.step = (test.step === 5? 0 : test.step + 1 )
    }

    states: [
        State {
            name: "step1"
            when: test.step === 0
            PropertyChanges {
                target: rect1
                y: test.height/2
            }
        },
        State {
            name: "step2"
            when: test.step === 1
            PropertyChanges {
                target: rect2
                y: test.height/2
            }
        },
        State {
            name: "step3"
            when: test.step === 2
            PropertyChanges {
                target: rect3
                y: test.height/2
            }
        },
        State {
            name: "step4"
            when: test.step === 3
            PropertyChanges {
                target: rect4
                y: test.height/2
            }
        },
        State {
            name: "step5"
            when: test.step === 4
            PropertyChanges {
                target: rect5
                y: test.height/2
            }
        }
    ]
    transitions: [
        Transition {
            PropertyAnimation{duration:1000}
        }
    ]

    Rectangle{
        id: rect1
        width: 20
        height: 20
        color: "red"
    }

    Rectangle{
        id: rect2
        width: rect1.width
        height: rect1.height
        anchors.left: rect1.right
        color: "red"
    }

    Rectangle{
        id: rect3
        width: rect1.width
        height: rect1.height
        anchors.left: rect2.right
        color: "red"
    }

    Rectangle{
        id: rect4
        width: rect1.width
        height: rect1.height
        anchors.left: rect3.right
        color: "red"
    }

    Rectangle{
        id: rect5
        width: rect1.width
        height: rect1.height
        anchors.left: rect4.right
        color: "red"
    }
}