Start of examples refactor

This is the general reorg of the examples directory structure, plus additional
guidelines.

calculator, animations and accessibility have been updated to the new standards
and tested, as an example.

Task-number: QTBUG-24133
Change-Id: I76c3b86751d3195ba2a5474ff23afb875765e9a4
Reviewed-by: Alan Alpert <alan.alpert@nokia.com>

22 files changed, 1328 insertions, 0 deletions

diff --git a/examples/qtquick/animation/animation.pro b/examples/qtquick/animation/animation.pro
new file mode 100644
index 0000000000..7e4cf9ef66
--- /dev/null
+++ b/examples/qtquick/animation/animation.pro
@@ -0,0 +1,10 @@
+TEMPLATE = app
+
+QT += quick declarative
+SOURCES += main.cpp
+
+target.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/animation
+qml.files = animation.qml  basics  behaviors  easing pathanimation  pathinterpolator  states
+qml.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/animation
+INSTALLS += target qml
+
diff --git a/examples/qtquick/animation/animation.qml b/examples/qtquick/animation/animation.qml
new file mode 100644
index 0000000000..62a85a9cfa
--- /dev/null
+++ b/examples/qtquick/animation/animation.qml
@@ -0,0 +1,90 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import "../../shared" as Examples
+
+/*!
+    \title QtQuick Examples - Animation
+    \example qtquick/animation
+    \brief This is a collection of QML Animation examples.
+    \image qml-animations-example.png
+
+    This is a collection of small QML examples relating to animation. Each example is
+    a small QML file emphasizing a particular element or feature.
+
+    ColorAnimation demonstrates using a color animation to fade a sky from day to night.
+
+    PropertyAnimation demonstrates using a number animation to bounce a circle up and down.
+
+    Behaviors demonstrates using behaviors to animate moving a rectangle to whereever you click.
+
+    Wiggly Text demonstrates using more complex behaviors to animate and wiggle some text around as you drag it.
+
+    Easing Curves shows off all the easing curves available in Qt Quick animations.
+
+    States demonstrates how the properties of an item can vary between states.
+
+    Transitions takes the States example and animates the property changes.
+
+    PathAnimation animates an image along a beizer curve using a PathAnimation.
+
+    PathInterpolator animates an image along the same beizer curve, using a PathInterpolator instead.
+*/
+
+Item {
+    height: 480
+    width: 320
+    Examples.LauncherList {
+        id: ll
+        anchors.fill: parent
+        Component.onCompleted: {
+            addExample("ColorAnimation", "Interpolates between colors",  Qt.resolvedUrl("basics/color-animation.qml"));
+            addExample("PropertyAnimation", "Interpolates between numbers", Qt.resolvedUrl("basics/property-animation.qml"));
+            addExample("Behaviors", "Animates procedural movement", Qt.resolvedUrl("behaviors/behavior-example.qml"));
+            addExample("Wiggly Text", "Text that wiggles as you drag it", Qt.resolvedUrl("behaviors/wigglytext.qml"));
+            addExample("Easing Curves", "Compare available easing curves", Qt.resolvedUrl("easing/easing.qml"));
+            addExample("States", "Simple states", Qt.resolvedUrl("states/states.qml"));
+            addExample("Transitions", "Simple states with animated transitions", Qt.resolvedUrl("states/transitions.qml"));
+            addExample("PathAnimation", "Animate along a path", Qt.resolvedUrl("pathanimation/pathanimation.qml"));
+            addExample("PathInterpolator", "Interpolates along a path", Qt.resolvedUrl("pathinterpolator/pathinterpolator.qml"));
+        }
+    }
+}
diff --git a/examples/qtquick/animation/animation.qmlproject b/examples/qtquick/animation/animation.qmlproject
new file mode 100644
index 0000000000..2e96daa881
--- /dev/null
+++ b/examples/qtquick/animation/animation.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "animation.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+}
diff --git a/examples/qtquick/animation/basics/color-animation.qml b/examples/qtquick/animation/basics/color-animation.qml
new file mode 100644
index 0000000000..f1bf40c40b
--- /dev/null
+++ b/examples/qtquick/animation/basics/color-animation.qml
@@ -0,0 +1,121 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+
+Item {
+    id: window
+    width: 320; height: 480
+
+    // Let's draw the sky...
+    Rectangle {
+        anchors { left: parent.left; top: parent.top; right: parent.right; bottom: parent.verticalCenter }
+        gradient: Gradient {
+            GradientStop {
+                position: 0.0
+                SequentialAnimation on color {
+                    loops: Animation.Infinite
+                    ColorAnimation { from: "DeepSkyBlue"; to: "#0E1533"; duration: 5000 }
+                    ColorAnimation { from: "#0E1533"; to: "DeepSkyBlue"; duration: 5000 }
+                }
+            }
+            GradientStop {
+                position: 1.0
+                SequentialAnimation on color {
+                    loops: Animation.Infinite
+                    ColorAnimation { from: "SkyBlue"; to: "#437284"; duration: 5000 }
+                    ColorAnimation { from: "#437284"; to: "SkyBlue"; duration: 5000 }
+                }
+            }
+        }
+    }
+
+    // the sun, moon, and stars
+    Item {
+        width: parent.width; height: 2 * parent.height
+        NumberAnimation on rotation { from: 0; to: 360; duration: 10000; loops: Animation.Infinite }
+        Image {
+            source: "images/sun.png"; y: 10; anchors.horizontalCenter: parent.horizontalCenter
+            rotation: -3 * parent.rotation
+        }
+        Image {
+            source: "images/moon.png"; y: parent.height - 74; anchors.horizontalCenter: parent.horizontalCenter
+            rotation: -parent.rotation
+        }
+        ParticleSystem {
+            id: particlesystem
+            x: 0; y: parent.height/2
+            width: parent.width; height: parent.height/2
+            ImageParticle {
+                source: "images/star.png"
+                groups: ["star"]
+                color: "#00333333"
+                SequentialAnimation on opacity {
+                    loops: Animation.Infinite
+                    NumberAnimation { from: 0; to: 1; duration: 5000 }
+                    NumberAnimation { from: 1; to: 0; duration: 5000 }
+                }
+            }
+            Emitter {
+                group: "star"
+                anchors.fill: parent
+                emitRate: parent.width / 50
+                lifeSpan: 5000
+            }
+        }
+    }
+
+    // ...and the ground.
+    Rectangle {
+        anchors { left: parent.left; top: parent.verticalCenter; right: parent.right; bottom: parent.bottom }
+        gradient: Gradient {
+            GradientStop {
+                position: 0.0
+                SequentialAnimation on color {
+                    loops: Animation.Infinite
+                    ColorAnimation { from: "ForestGreen"; to: "#001600"; duration: 5000 }
+                    ColorAnimation { from: "#001600"; to: "ForestGreen"; duration: 5000 }
+                }
+            }
+            GradientStop { position: 1.0; color: "DarkGreen" }
+        }
+    }
+}
diff --git a/examples/qtquick/animation/basics/images/face-smile.png b/examples/qtquick/animation/basics/images/face-smile.png
new file mode 100644
index 0000000000..3d66d72578
--- /dev/null
+++ b/examples/qtquick/animation/basics/images/face-smile.png
diff --git a/examples/qtquick/animation/basics/images/moon.png b/examples/qtquick/animation/basics/images/moon.png
new file mode 100644
index 0000000000..9407b2b4f0
--- /dev/null
+++ b/examples/qtquick/animation/basics/images/moon.png
diff --git a/examples/qtquick/animation/basics/images/shadow.png b/examples/qtquick/animation/basics/images/shadow.png
new file mode 100644
index 0000000000..8270565e87
--- /dev/null
+++ b/examples/qtquick/animation/basics/images/shadow.png
diff --git a/examples/qtquick/animation/basics/images/star.png b/examples/qtquick/animation/basics/images/star.png
new file mode 100644
index 0000000000..27ef924267
--- /dev/null
+++ b/examples/qtquick/animation/basics/images/star.png
diff --git a/examples/qtquick/animation/basics/images/sun.png b/examples/qtquick/animation/basics/images/sun.png
new file mode 100644
index 0000000000..7713ca5ce7
--- /dev/null
+++ b/examples/qtquick/animation/basics/images/sun.png
diff --git a/examples/qtquick/animation/basics/property-animation.qml b/examples/qtquick/animation/basics/property-animation.qml
new file mode 100644
index 0000000000..4a4d3e3b2a
--- /dev/null
+++ b/examples/qtquick/animation/basics/property-animation.qml
@@ -0,0 +1,105 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: window
+    width: 320; height: 480
+
+    // Let's draw the sky...
+    Rectangle {
+        anchors { left: parent.left; top: parent.top; right: parent.right; bottom: parent.verticalCenter }
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "DeepSkyBlue" }
+            GradientStop { position: 1.0; color: "LightSkyBlue" }
+        }
+    }
+
+    // ...and the ground.
+    Rectangle {
+        anchors { left: parent.left; top: parent.verticalCenter; right: parent.right; bottom: parent.bottom }
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "ForestGreen" }
+            GradientStop { position: 1.0; color: "DarkGreen" }
+        }
+    }
+
+    // The shadow for the smiley face
+    Image {
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: smiley.minHeight + 58
+        source: "images/shadow.png"
+
+        // The scale property depends on the y position of the smiley face.
+        scale: smiley.y * 0.5 / (smiley.minHeight - smiley.maxHeight)
+    }
+
+    Image {
+        id: smiley
+        property int maxHeight: window.height / 3
+        property int minHeight: 2 * window.height / 3
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: minHeight
+        source: "images/face-smile.png"
+
+        // Animate the y property. Setting loops to Animation.Infinite makes the
+        // animation repeat indefinitely, otherwise it would only run once.
+        SequentialAnimation on y {
+            loops: Animation.Infinite
+
+            // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function
+            NumberAnimation {
+                from: smiley.minHeight; to: smiley.maxHeight
+                easing.type: Easing.OutExpo; duration: 300
+            }
+
+            // Then move back to minHeight in 1 second, using the OutBounce easing function
+            NumberAnimation {
+                from: smiley.maxHeight; to: smiley.minHeight
+                easing.type: Easing.OutBounce; duration: 1000
+            }
+
+            // Then pause for 500ms
+            PauseAnimation { duration: 500 }
+        }
+    }
+}
diff --git a/examples/qtquick/animation/behaviors/SideRect.qml b/examples/qtquick/animation/behaviors/SideRect.qml
new file mode 100644
index 0000000000..623c6965d8
--- /dev/null
+++ b/examples/qtquick/animation/behaviors/SideRect.qml
@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: myRect
+
+    property string text
+
+    width: 75; height: 50
+    radius: 6
+    color: "#646464"
+    border.width: 4; border.color: "white"
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: {
+            focusRect.x = myRect.x; 
+            focusRect.y = myRect.y; 
+            focusRect.text = myRect.text;
+        }
+    }
+}
diff --git a/examples/qtquick/animation/behaviors/behavior-example.qml b/examples/qtquick/animation/behaviors/behavior-example.qml
new file mode 100644
index 0000000000..a88d7c8c7b
--- /dev/null
+++ b/examples/qtquick/animation/behaviors/behavior-example.qml
@@ -0,0 +1,118 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    width: 320; height: 480
+    color: "#343434"
+
+    Rectangle {
+        anchors.centerIn: parent
+        width: 200; height: 200
+        radius: 30
+        color: "transparent"
+        border.width: 4; border.color: "white"
+
+
+        SideRect {
+            id: leftRect
+            anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.left }
+            text: "Left"
+        }
+
+        SideRect {
+            id: rightRect
+            anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.right }
+            text: "Right"
+        }
+
+        SideRect {
+            id: topRect
+            anchors { verticalCenter: parent.top; horizontalCenter: parent.horizontalCenter }
+            text: "Top"
+        }
+
+        SideRect {
+            id: bottomRect
+            anchors { verticalCenter: parent.bottom; horizontalCenter: parent.horizontalCenter }
+            text: "Bottom"
+        }
+
+
+        Rectangle {
+            id: focusRect
+
+            property string text
+
+            x: 62; y: 75; width: 75; height: 50
+            radius: 6
+            border.width: 4; border.color: "white"
+            color: "firebrick"
+
+            // Set an 'elastic' behavior on the focusRect's x property.
+            Behavior on x {
+                NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
+            }
+
+            // Set an 'elastic' behavior on the focusRect's y property.
+            Behavior on y {
+                NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 }
+            }
+
+            Text {
+                id: focusText
+                text: focusRect.text
+                anchors.centerIn: parent
+                color: "white"
+                font.pixelSize: 16; font.bold: true
+
+                // Set a behavior on the focusText's x property:
+                // Set the opacity to 0, set the new text value, then set the opacity back to 1.
+                Behavior on text {
+                    SequentialAnimation {
+                        NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 }
+                        NumberAnimation { target: focusText; property: "opacity"; to: 1; duration: 150 }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/qtquick/animation/behaviors/wigglytext.qml b/examples/qtquick/animation/behaviors/wigglytext.qml
new file mode 100644
index 0000000000..4bb94da100
--- /dev/null
+++ b/examples/qtquick/animation/behaviors/wigglytext.qml
@@ -0,0 +1,108 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: container
+
+    property string text: "Drag me!"
+    property bool animated: true
+
+    width: 320; height: 480; color: "#474747"; focus: true
+
+    Keys.onPressed: {
+        if (event.key == Qt.Key_Delete || event.key == Qt.Key_Backspace)
+            container.remove()
+        else if (event.text != "") {
+            container.append(event.text)
+        }
+    }
+
+    function append(text) {
+        container.animated = false
+        var lastLetter = container.children[container.children.length - 1]
+        var newLetter = letterComponent.createObject(container)
+        newLetter.text = text
+        newLetter.follow = lastLetter
+        container.animated = true
+    }
+
+    function remove() {
+        if (container.children.length)
+            container.children[container.children.length - 1].destroy()
+    }
+
+    function doLayout() {
+        var follow = null
+        for (var i = 0; i < container.text.length; ++i) {
+            var newLetter = letterComponent.createObject(container)
+            newLetter.text = container.text[i]
+            newLetter.follow = follow
+            follow = newLetter
+        }
+    }
+
+    Component {
+        id: letterComponent
+        Text {
+            id: letter
+            property variant follow
+
+            x: follow ? follow.x + follow.width : container.width / 6
+            y: follow ? follow.y : container.height / 2
+
+            font.pixelSize: 40; font.bold: true
+            color: "#999999"; styleColor: "#222222"; style: Text.Raised
+
+            MouseArea {
+                anchors.fill: parent
+                drag.target: letter; drag.axis: Drag.XandYAxis
+                onPressed: letter.color = "#dddddd"
+                onReleased: letter.color = "#999999"
+            }
+
+            Behavior on x { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }
+            Behavior on y { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } }
+        }
+    }
+
+    Component.onCompleted: doLayout()
+}
diff --git a/examples/qtquick/animation/easing/content/QuitButton.qml b/examples/qtquick/animation/easing/content/QuitButton.qml
new file mode 100644
index 0000000000..702b892d23
--- /dev/null
+++ b/examples/qtquick/animation/easing/content/QuitButton.qml
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+Image {
+    source: "quit.png"
+    scale: quitMouse.pressed ? 0.8 : 1.0
+    smooth: quitMouse.pressed
+    MouseArea {
+        id: quitMouse
+        anchors.fill: parent
+        anchors.margins: -10
+        onClicked: Qt.quit()
+    }
+}
diff --git a/examples/qtquick/animation/easing/content/quit.png b/examples/qtquick/animation/easing/content/quit.png
new file mode 100644
index 0000000000..b822057d4e
--- /dev/null
+++ b/examples/qtquick/animation/easing/content/quit.png
diff --git a/examples/qtquick/animation/easing/easing.qml b/examples/qtquick/animation/easing/easing.qml
new file mode 100644
index 0000000000..8977029fb3
--- /dev/null
+++ b/examples/qtquick/animation/easing/easing.qml
@@ -0,0 +1,157 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import "content"
+
+Rectangle {
+    id: window
+    width: 320; height: 480; color: "#232323"
+
+    property var easingCurve: [ 0.2, 0.2, 0.13, 0.65, 0.2, 0.8,
+                                0.624, 0.98, 0.93, 0.95, 1, 1 ]
+
+    ListModel {
+        id: easingTypes
+        ListElement { name: "Easing.Linear"; type: Easing.Linear; ballColor: "DarkRed" }
+        ListElement { name: "Easing.InQuad"; type: Easing.InQuad; ballColor: "IndianRed" }
+        ListElement { name: "Easing.OutQuad"; type: Easing.OutQuad; ballColor: "Salmon" }
+        ListElement { name: "Easing.InOutQuad"; type: Easing.InOutQuad; ballColor: "Tomato" }
+        ListElement { name: "Easing.OutInQuad"; type: Easing.OutInQuad; ballColor: "DarkOrange" }
+        ListElement { name: "Easing.InCubic"; type: Easing.InCubic; ballColor: "Gold" }
+        ListElement { name: "Easing.OutCubic"; type: Easing.OutCubic; ballColor: "Yellow" }
+        ListElement { name: "Easing.InOutCubic"; type: Easing.InOutCubic; ballColor: "PeachPuff" }
+        ListElement { name: "Easing.OutInCubic"; type: Easing.OutInCubic; ballColor: "Thistle" }
+        ListElement { name: "Easing.InQuart"; type: Easing.InQuart; ballColor: "Orchid" }
+        ListElement { name: "Easing.OutQuart"; type: Easing.OutQuart; ballColor: "Purple" }
+        ListElement { name: "Easing.InOutQuart"; type: Easing.InOutQuart; ballColor: "SlateBlue" }
+        ListElement { name: "Easing.OutInQuart"; type: Easing.OutInQuart; ballColor: "Chartreuse" }
+        ListElement { name: "Easing.InQuint"; type: Easing.InQuint; ballColor: "LimeGreen" }
+        ListElement { name: "Easing.OutQuint"; type: Easing.OutQuint; ballColor: "SeaGreen" }
+        ListElement { name: "Easing.InOutQuint"; type: Easing.InOutQuint; ballColor: "DarkGreen" }
+        ListElement { name: "Easing.OutInQuint"; type: Easing.OutInQuint; ballColor: "Olive" }
+        ListElement { name: "Easing.InSine"; type: Easing.InSine; ballColor: "DarkSeaGreen" }
+        ListElement { name: "Easing.OutSine"; type: Easing.OutSine; ballColor: "Teal" }
+        ListElement { name: "Easing.InOutSine"; type: Easing.InOutSine; ballColor: "Turquoise" }
+        ListElement { name: "Easing.OutInSine"; type: Easing.OutInSine; ballColor: "SteelBlue" }
+        ListElement { name: "Easing.InExpo"; type: Easing.InExpo; ballColor: "SkyBlue" }
+        ListElement { name: "Easing.OutExpo"; type: Easing.OutExpo; ballColor: "RoyalBlue" }
+        ListElement { name: "Easing.InOutExpo"; type: Easing.InOutExpo; ballColor: "MediumBlue" }
+        ListElement { name: "Easing.OutInExpo"; type: Easing.OutInExpo; ballColor: "MidnightBlue" }
+        ListElement { name: "Easing.InCirc"; type: Easing.InCirc; ballColor: "CornSilk" }
+        ListElement { name: "Easing.OutCirc"; type: Easing.OutCirc; ballColor: "Bisque" }
+        ListElement { name: "Easing.InOutCirc"; type: Easing.InOutCirc; ballColor: "RosyBrown" }
+        ListElement { name: "Easing.OutInCirc"; type: Easing.OutInCirc; ballColor: "SandyBrown" }
+        ListElement { name: "Easing.InElastic"; type: Easing.InElastic; ballColor: "DarkGoldenRod" }
+        ListElement { name: "Easing.OutElastic"; type: Easing.OutElastic; ballColor: "Chocolate" }
+        ListElement { name: "Easing.InOutElastic"; type: Easing.InOutElastic; ballColor: "SaddleBrown" }
+        ListElement { name: "Easing.OutInElastic"; type: Easing.OutInElastic; ballColor: "Brown" }
+        ListElement { name: "Easing.InBack"; type: Easing.InBack; ballColor: "Maroon" }
+        ListElement { name: "Easing.OutBack"; type: Easing.OutBack; ballColor: "LavenderBlush" }
+        ListElement { name: "Easing.InOutBack"; type: Easing.InOutBack; ballColor: "MistyRose" }
+        ListElement { name: "Easing.OutInBack"; type: Easing.OutInBack; ballColor: "Gainsboro" }
+        ListElement { name: "Easing.OutBounce"; type: Easing.OutBounce; ballColor: "Silver" }
+        ListElement { name: "Easing.InBounce"; type: Easing.InBounce; ballColor: "DimGray" }
+        ListElement { name: "Easing.InOutBounce"; type: Easing.InOutBounce; ballColor: "SlateGray" }
+        ListElement { name: "Easing.OutInBounce"; type: Easing.OutInBounce; ballColor: "DarkSlateGray" }
+        ListElement { name: "Easing.Bezier"; type: Easing.Bezier; ballColor: "Chartreuse"; }
+    }
+
+    Component {
+        id: delegate
+
+        Item {
+            height: 56; width: window.width
+
+            Text { text: name; anchors.centerIn: parent; color: "White" }
+
+            Rectangle {
+                id: slot1; color: "#121212"; x: 30; height: 46; width: 46
+                border.color: "#343434"; border.width: 1; radius: 12
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Rectangle {
+                id: slot2; color: "#121212"; x: window.width - 76; height: 46; width: 46
+                border.color: "#343434"; border.width: 1; radius: 12
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Rectangle {
+                id: rect; x: 30; color: "#454545"
+                border.color: "White"; border.width: 2
+                height: 46; width: 46; radius: 12
+                anchors.verticalCenter: parent.verticalCenter
+
+                MouseArea {
+                    onClicked: if (rect.state == '') rect.state = "right"; else rect.state = ''
+                    anchors.fill: parent
+                    anchors.margins: -5 // Make MouseArea bigger than the rectangle, itself
+                }
+
+                states : State {
+                    name: "right"
+                    PropertyChanges { target: rect; x: window.width - 76; color: ballColor }
+                }
+
+                transitions: Transition {
+                    NumberAnimation { properties: "x"; easing.type: type; easing.bezierCurve: getBezierCurve(name); duration: 1000 }
+                    ColorAnimation { properties: "color"; easing.type: type; easing.bezierCurve: getBezierCurve(name); duration: 1000 }
+                }
+            }
+        }
+    }
+
+    Flickable {
+        anchors.fill: parent
+        contentHeight: layout.height
+        Column {
+            id: layout
+            Repeater { model: easingTypes; delegate: delegate }
+        }
+    }
+
+    function getBezierCurve(name)
+    {
+        if (name === "Easing.Bezier")
+            return easingCurve;
+        return [];
+    }
+}
diff --git a/examples/qtquick/animation/main.cpp b/examples/qtquick/animation/main.cpp
new file mode 100644
index 0000000000..799dfd7725
--- /dev/null
+++ b/examples/qtquick/animation/main.cpp
@@ -0,0 +1,41 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "../../shared/shared.h"
+DECLARATIVE_EXAMPLE_MAIN(animation)
diff --git a/examples/qtquick/animation/pathanimation/pathanimation.qml b/examples/qtquick/animation/pathanimation/pathanimation.qml
new file mode 100644
index 0000000000..f995218c6c
--- /dev/null
+++ b/examples/qtquick/animation/pathanimation/pathanimation.qml
@@ -0,0 +1,105 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: window
+    width: 320
+    height: 480
+
+    Canvas {
+        id: canvas
+        anchors.fill: parent
+        smooth: 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
+        smooth: true
+
+        Text {
+            anchors.centerIn: parent
+            text: "Box"
+        }
+    }
+}
diff --git a/examples/qtquick/animation/pathinterpolator/pathinterpolator.qml b/examples/qtquick/animation/pathinterpolator/pathinterpolator.qml
new file mode 100644
index 0000000000..5a137c732d
--- /dev/null
+++ b/examples/qtquick/animation/pathinterpolator/pathinterpolator.qml
@@ -0,0 +1,112 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: window
+    width: 320
+    height: 480
+
+    Canvas {
+        id: canvas
+        anchors.fill: parent
+        smooth: true
+
+        onPaint: {
+            var context = canvas.getContext("2d")
+            context.clearRect(0, 0, width, height)
+            context.strokeStyle = "black"
+            context.path = motionPath.path
+            context.stroke()
+        }
+    }
+
+    PathInterpolator {
+        id: motionPath
+
+        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()
+        }
+
+        SequentialAnimation on progress {
+            running: true
+            loops: -1
+            PauseAnimation { duration: 1000 }
+            NumberAnimation {
+                id: progressAnim
+                running: false
+                from: 0; to: 1
+                duration: 2000
+                easing.type: Easing.InQuad
+            }
+        }
+    }
+
+    Rectangle {
+        id: box
+
+        width: 50; height: 50
+        border.width: 1
+        smooth: true
+
+        //bind our attributes to follow the path as progress changes
+        x: motionPath.x
+        y: motionPath.y
+        rotation: motionPath.angle
+        transform: Translate { x: -box.width/2; y: -box.height/2 }
+
+        Text {
+            anchors.centerIn: parent
+            text: "Box"
+        }
+    }
+
+}
diff --git a/examples/qtquick/animation/states/qt-logo.png b/examples/qtquick/animation/states/qt-logo.png
new file mode 100644
index 0000000000..14ddf2a028
--- /dev/null
+++ b/examples/qtquick/animation/states/qt-logo.png
diff --git a/examples/qtquick/animation/states/states.qml b/examples/qtquick/animation/states/states.qml
new file mode 100644
index 0000000000..7ca56a9295
--- /dev/null
+++ b/examples/qtquick/animation/states/states.qml
@@ -0,0 +1,101 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: page
+    width: 640; height: 480
+    color: "#343434"
+
+    Image { 
+        id: userIcon
+        x: topLeftRect.x; y: topLeftRect.y
+        source: "qt-logo.png"
+    }
+
+    Rectangle {
+        id: topLeftRect
+
+        anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
+        width: 46; height: 54
+        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: 46; height: 54
+        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: 46; height: 54
+        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  }
+        }
+    ]
+}
diff --git a/examples/qtquick/animation/states/transitions.qml b/examples/qtquick/animation/states/transitions.qml
new file mode 100644
index 0000000000..d57924d6d2
--- /dev/null
+++ b/examples/qtquick/animation/states/transitions.qml
@@ -0,0 +1,130 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+/*
+    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: "qt-logo.png"
+    }
+
+    Rectangle {
+        id: topLeftRect
+
+        anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
+        width: 46; height: 54
+        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: 46; height: 54
+        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: 46; height: 54
+        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 }
+        }
+    ]
+}