Restructure the examples. They are now organized into various

subdirectories to make it easier to locate examples for certain
features (e.g. animation) and to distinguish between different types
of examples (e.g. very basic examples vs complex demo-like examples).

1 files changed, 90 insertions, 0 deletions

diff --git a/examples/declarative/animation/states/transitions.qml b/examples/declarative/animation/states/transitions.qml
new file mode 100644
index 0000000..ccc7060
--- /dev/null
+++ b/examples/declarative/animation/states/transitions.qml
@@ -0,0 +1,90 @@
+import Qt 4.7
+
+/*
+    This is exactly the same as states.qml, except that we have appended
+    a set of transitions to apply animations when the item changes 
+    between each state.
+*/
+
+Rectangle {
+    id: page
+    width: 640; height: 480
+    color: "#343434"
+
+    Image { 
+        id: userIcon
+        x: topLeftRect.x; y: topLeftRect.y
+        source: "user.png"
+    }
+
+    Rectangle {
+        id: topLeftRect
+
+        anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to the default state, returning the image to
+        // its initial position
+        MouseArea { anchors.fill: parent; onClicked: page.state = '' }
+    }
+
+    Rectangle {
+        id: middleRightRect
+
+        anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to 'middleRight'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' }
+    }
+
+    Rectangle {
+        id: bottomLeftRect
+
+        anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
+        width: 64; height: 64
+        color: "Transparent"; border.color: "Gray"; radius: 6
+
+        // Clicking in here sets the state to 'bottomLeft'
+        MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
+    }
+
+    states: [
+        // In state 'middleRight', move the image to middleRightRect
+        State {
+            name: "middleRight"
+            PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
+        },
+
+        // In state 'bottomLeft', move the image to bottomLeftRect
+        State {
+            name: "bottomLeft"
+            PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y  }
+        }
+    ]
+
+    // Transitions define how the properties change when the item moves between each state
+    transitions: [
+
+        // When transitioning to 'middleRight' move x,y over a duration of 1 second,
+        // with OutBounce easing function.
+        Transition {
+            from: "*"; to: "middleRight"
+            NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 1000 }
+        },
+
+        // When transitioning to 'bottomLeft' move x,y over a duration of 2 seconds,
+        // with InOutQuad easing function.
+        Transition {
+            from: "*"; to: "bottomLeft"
+            NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 2000 }
+        },
+
+        // For any other state changes move x,y linearly over duration of 200ms.
+        Transition {
+            NumberAnimation { properties: "x,y"; duration: 200 }
+        }
+    ]
+}