Start updating state and animation docs.

3 files changed, 109 insertions, 18 deletions

diff --git a/examples/declarative/behaviours/SideRect.qml b/examples/declarative/behaviours/SideRect.qml
new file mode 100644
index 0000000..c7c7ebf
--- /dev/null
+++ b/examples/declarative/behaviours/SideRect.qml
@@ -0,0 +1,17 @@
+import Qt 4.6
+
+Rectangle {
+    id: myRect
+
+    property string text
+
+    color: "black"
+    width: 75; height: 50
+    radius: 5
+    border.width: 10; border.color: "white";
+    MouseRegion {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: { focusRect.x = myRect.x; focusRect.y = myRect.y; focusRect.text = myRect.text }
+    }
+}
diff --git a/examples/declarative/behaviours/behavior.qml b/examples/declarative/behaviours/behavior.qml
new file mode 100644
index 0000000..2732c0a
--- /dev/null
+++ b/examples/declarative/behaviours/behavior.qml
@@ -0,0 +1,72 @@
+import Qt 4.6
+
+Rectangle {
+    color: "black"
+    width: 400; height: 400
+
+    Rectangle {
+        color: "transparent"
+        anchors.centerIn: parent
+        width: 200; height: 200
+        radius: 30
+        border.width: 10; border.color: "white";
+
+        SideRect {
+            id: leftRect
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.left
+            text: "Left"
+        }
+
+        SideRect {
+            id: rightRect
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.right
+            text: "Right"
+        }
+
+        SideRect {
+            id: topRect
+            anchors.verticalCenter: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Top"
+        }
+
+        SideRect {
+            id: bottomRect
+            anchors.verticalCenter: parent.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Bottom"
+        }
+
+
+        Rectangle {
+            id: focusRect
+
+            property string text
+
+            color: "red"
+            width: 75; height: 50
+            radius: 5
+            border.width: 10; border.color: "white";
+            x: 100-37; y: 100-25
+            x: Behavior { NumberAnimation { duration: 300 } }
+            y: Behavior { NumberAnimation { duration: 300 } }
+            Text {
+                id: focusText
+                text: focusRect.text;
+                text: Behavior {
+                    SequentialAnimation {
+                        NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 }
+                        PropertyAction {}
+                        NumberAnimation { target: focusText; property: "opacity"; to: 1; duration: 150 }
+                    }
+                }
+                anchors.centerIn: parent;
+                color: "white";
+                font.pixelSize: 16
+                font.bold: true
+            }
+        }
+    }
+}
diff --git a/examples/declarative/behaviours/test.qml b/examples/declarative/behaviours/test.qml
index a15d05d..946559b 100644
--- a/examples/declarative/behaviours/test.qml
+++ b/examples/declarative/behaviours/test.qml
@@ -7,7 +7,7 @@ Rectangle {
     id: page
     MouseRegion {
         anchors.fill: parent
-        onClicked: { bluerect.parent = page; bluerect.x = mouseX; }
+        onClicked: { bluerect.parent = page; print(mouseX); bluerect.x = mouseX; }
     }
     MyRect {
         color: "green"
@@ -57,25 +57,27 @@ Rectangle {
         height: 100
         id: bluerect
         x: Behavior {
-            SequentialAnimation {
-                NumberAnimation {
-                    target: bluerect
-                    properties: "y"
-                    from: 0
-                    to: 10
-                    easing: "easeOutBounce(amplitude:30)"
-                    duration: 250
-                }
-                NumberAnimation {
-                    target: bluerect
-                    properties: "y"
-                    from: 10
-                    to: 0
-                    easing: "easeOutBounce(amplitude:30)"
-                    duration: 250
+            ParallelAnimation {
+                SequentialAnimation {
+                    NumberAnimation {
+                        target: bluerect
+                        properties: "y"
+                        from: 0
+                        to: 10
+                        easing: "easeOutBounce(amplitude:30)"
+                        duration: 250
+                    }
+                    NumberAnimation {
+                        target: bluerect
+                        properties: "y"
+                        from: 10
+                        to: 0
+                        easing: "easeOutBounce(amplitude:30)"
+                        duration: 250
+                    }
                 }
+                NumberAnimation { duration: 500 }
             }
-            NumberAnimation { duration: 500 }
         }
         parent: Behavior {
             SequentialAnimation {