diff options
Diffstat (limited to 'src/quick/doc/snippets/qml/usecases/animations.qml')
| -rw-r--r-- | src/quick/doc/snippets/qml/usecases/animations.qml | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/src/quick/doc/snippets/qml/usecases/animations.qml b/src/quick/doc/snippets/qml/usecases/animations.qml new file mode 100644 index 0000000000..486cf57b1e --- /dev/null +++ b/src/quick/doc/snippets/qml/usecases/animations.qml @@ -0,0 +1,187 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** This file is part of the documentation 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$ +** +****************************************************************************/ + +//![0] +import QtQuick 2.0 + +Item { + + width: 320 + height: 480 + + Rectangle { + color: "#272822" + width: 320 + height: 480 + } + + Column { + //![states] + + Item { + id: container + width: 320 + height: 120 + + Rectangle { + id: rect + color: "red" + width: 120 + height: 120 + + MouseArea { + anchors.fill: parent + onClicked: container.state == 'other' ? container.state = '' : container.state = 'other' + } + } + states: [ + // This adds a second state to the container where the rectangle is farther to the right + + State { name: "other" + + PropertyChanges { + target: rect + x: 200 + } + } + ] + transitions: [ + // This adds a transition that defaults to applying to all state changes + + Transition { + + // This applies a default NumberAnimation to any changes a state change makes to x or y properties + NumberAnimation { properties: "x,y" } + } + ] + } + //![states] + //![behave] + Item { + width: 320 + height: 120 + + Rectangle { + color: "green" + width: 120 + height: 120 + + // This is the behavior, and it applies a NumberAnimation to any attempt to set the x property + Behavior on x { + + NumberAnimation { + //This specifies how long the animation takes + duration: 600 + //This selects an easing curve to interpolate with, the default is Easing.Linear + easing.type: Easing.OutBounce + } + } + + MouseArea { + anchors.fill: parent + onClicked: parent.x == 0 ? parent.x = 200 : parent.x = 0 + } + } + } + //![behave] + //![constant] + Item { + width: 320 + height: 120 + + Rectangle { + color: "blue" + width: 120 + height: 120 + + // By setting this SequentialAnimation on x, it and animations within it will automatically animate + // the x property of this element + SequentialAnimation on x { + id: xAnim + // Animations on properties start running by default + running: false + loops: Animation.Infinite // The animation is set to loop indefinitely + NumberAnimation { from: 0; to: 200; duration: 500; easing.type: Easing.InOutQuad } + NumberAnimation { from: 200; to: 0; duration: 500; easing.type: Easing.InOutQuad } + PauseAnimation { duration: 250 } // This puts a bit of time between the loop + } + + MouseArea { + anchors.fill: parent + // The animation starts running when you click within the rectangle + onClicked: xAnim.running = true + } + } + } + //![constant] + + //![scripted] + Item { + width: 320 + height: 120 + + Rectangle { + id: rectangle + color: "yellow" + width: 120 + height: 120 + + MouseArea { + anchors.fill: parent + // The animation starts running when you click within the rectange + onClicked: anim.running = true; + } + } + + // This animation specifically targets the Rectangle's properties to animate + SequentialAnimation { + id: anim + // Animations on their own are not running by default + // The default number of loops is one, restart the animation to see it again + + NumberAnimation { target: rectangle; property: "x"; from: 0; to: 200; duration: 500 } + + NumberAnimation { target: rectangle; property: "x"; from: 200; to: 0; duration: 500 } + } + } + //![scripted] + } +} +//![0] |