qt-creator/doc/examples/transitions/main.qml

import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick.Dialogs 1.2

ApplicationWindow {
    visible: true
    width: 330
    height: 330
    title: qsTr("Transitions")

    MainForm {
        anchors.fill: parent
        id: page
        mouseArea1 {
                   onClicked: stateGroup.state = ' '
               }
           mouseArea2 {
               onClicked: stateGroup.state = 'State1'
           }
           mouseArea3 {
               onClicked: stateGroup.state = 'State2'
           }
    }

    StateGroup {
            id: stateGroup
            states: [
                State {
                    name: "State1"

                    PropertyChanges {
                        target: page.icon
                        x: page.middleRightRect.x
                        y: page.middleRightRect.y
                    }
                },
                State {
                    name: "State2"

                    PropertyChanges {
                        target: page.icon
                        x: page.bottomLeftRect.x
                        y: page.bottomLeftRect.y
                    }
                }
            ]
            transitions: [
                    Transition {
                            from: "*"; to: "State1"
                            NumberAnimation {
                                easing.type: Easing.OutBounce
                                properties: "x,y";
                                duration: 1000
                            }
                        },
                    Transition {
                            from: "*"; to: "State2"
                            NumberAnimation {
                                properties: "x,y";
                                easing.type: Easing.InOutQuad;
                                duration: 2000
                            }
                        },
                    Transition {
                             NumberAnimation {
                                 properties: "x,y";
                                 duration: 200
                             }
                         }
                    ]
            }
}