diff options
author | Qt Continuous Integration System <qt-info@nokia.com> | 2010-08-05 10:01:20 (GMT) |
---|---|---|
committer | Qt Continuous Integration System <qt-info@nokia.com> | 2010-08-05 10:01:20 (GMT) |
commit | 1f682526eba54d47deddfac38c37a2bf6e26be66 (patch) | |
tree | f745f606edec4f5c049214c04e2f18c08a489e21 /doc | |
parent | 719e22c7fd34112460cddecb1491c3575c5a8c86 (diff) | |
parent | dc2f700a006d827db0eaf8d1e01e4d9c7c8c0baa (diff) | |
download | Qt-1f682526eba54d47deddfac38c37a2bf6e26be66.zip Qt-1f682526eba54d47deddfac38c37a2bf6e26be66.tar.gz Qt-1f682526eba54d47deddfac38c37a2bf6e26be66.tar.bz2 |
Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7-integration
* '4.7' of scm.dev.nokia.troll.no:qt/qt-qml:
Rename example component file for clarity
Improve docs on QML Animation page and associated elements
Fix warning from whining complier.
Re-enable script program caching on Symbian (used to be disabled due to crash problems that no longer occur).
Increase drag distance on Symbian to improve finger usability on capacitive screens
Increase maximum heap size of QML Viewer
Add missing test file.
Make sure onFocusChanged is correctly emitted for items in a FocusScope.
Diffstat (limited to 'doc')
-rw-r--r-- | doc/src/declarative/animation.qdoc | 345 | ||||
-rw-r--r-- | doc/src/snippets/declarative/animation-behavioral.qml | 61 | ||||
-rw-r--r-- | doc/src/snippets/declarative/animation-easing.qml | 51 | ||||
-rw-r--r-- | doc/src/snippets/declarative/animation-elements.qml | 66 | ||||
-rw-r--r-- | doc/src/snippets/declarative/animation-groups.qml | 104 | ||||
-rw-r--r-- | doc/src/snippets/declarative/animation-propertyvaluesource.qml | 51 | ||||
-rw-r--r-- | doc/src/snippets/declarative/animation-signalhandler.qml | 55 | ||||
-rw-r--r-- | doc/src/snippets/declarative/animation-standalone.qml | 63 | ||||
-rw-r--r-- | doc/src/snippets/declarative/animation-transitions.qml | 62 | ||||
-rw-r--r-- | doc/src/snippets/declarative/animation.qml | 181 | ||||
-rw-r--r-- | doc/src/snippets/declarative/transition.qml | 9 |
11 files changed, 776 insertions, 272 deletions
diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc index 401cf16..7416341 100644 --- a/doc/src/declarative/animation.qdoc +++ b/doc/src/declarative/animation.qdoc @@ -29,134 +29,301 @@ \page qdeclarativeanimation.html \title QML Animation -Animation in QML is done by animating properties of objects. Properties of type -real, int, color, rect, point, size, and vector3d can all be animated. -QML supports three main forms of animation: basic property animation, -transitions, and property behaviors. +In QML, animations are created by applying animation objects to object property +values to gradually change them over time. Animation objects are created from +the built-in set of animation elements, which can be used to animate various +types of property values. In addition, animation objects can be applied in +different ways depending on the context in which they are required. + +To create an animation, use an appropriate animation element for the type of +the property that is to be animated, and apply the animation depending on the +type of behavior that is required. This page describes the \l {Types of +Animations} that can be created and the \l {Animation Elements} that are used +to create these animations. + + +\section1 Types of Animations + +An animation is created in different ways depending on the context in which it +is required. Suppose a \l Rectangle's movement - that is, changes in its \c x +or \c y property values - should be animated. The semantics of the animation +differ depending on whether you want to create: + +\list +\o An animation that moves the \l Rectangle as soon as it is created, to a +known position +\o An animation that only triggers when the \l Rectangle is moved by external +sources - for example, when the mouse is clicked, animate the movement to the +mouse position +\o An animation that triggers when a particular signal is received +\o A standalone animation that is not bound to the \l Rectangle's movement, but +instead can be started and stopped from script as required +\o An animation that only triggers during \l{QML States}{state changes} +\endlist + +To support these different types of animation methods, QML provides several +methods for defining an animation. These are: + +\list +\o Creating an \l{Animations as Property Value Sources}{animation using +property value sources}, to immediately animate a specific property +\o Using \l{Behavioral Animations}{behavioral animations}, which are triggered +when a property changes value +\o \l{Animations in a Signal Handler}{Within a signal handler}, to be triggered +when a signal is received +\o As a \l{Standalone Animation}{standalone animation}, that can be +started/stopped from script and can be rebound to different objects +\o Using \l{Transitions}{transitions}, to provide animations between \l{QML +States}{state changes} +\endlist + +These methods are demonstrated below. Notice these examples use +PropertyAnimation, which is one of several QML elements that can be used to +create an animation. See the \l {Animation Elements} section further below for +details. -\tableofcontents -\section1 Basic Property Animation -The simplest form of animation is a \l PropertyAnimation, which can animate all of the property -types listed above. If the property you are animating is a number or color, you can alternatively use -NumberAnimation or ColorAnimation. These elements don't add any additional functionality, -but will help enforce type correctness and are slightly more efficient. +\section2 Animations as Property Value Sources + +An animation is applied as a \l{QDeclarativePropertyValueSource}{property value +source} using the \e Animation \bold on \e Property syntax. Here is a \l +Rectangle whose movement is animated using this method: + +\snippet doc/src/snippets/declarative/animation-propertyvaluesource.qml 0 + +This applies a PropertyAnimation to the \l Rectangle's \c x and \c y properties +to animate from their current values (i.e. zero) to 50, over 1000 milliseconds. +The animation starts as soon as the \l Rectangle is loaded. To animate from +specific values rather than the current \c x and \c y values, set the +PropertyAnimation's \l {PropertyAnimation::}{from} property. + +Specifying an animation as a property value source is useful for animating a +property to a particular value as soon as the object is loaded. + + +\section2 Behavioral Animations + +Often an animation should be applied whenever a particular property value +changes. In these cases, a \l Behavior can be used to specify a default +animation for a property change. Here is an example: + +\snippet doc/src/snippets/declarative/animation-behavioral.qml 0 -A property animation can be specified as a value source using the \e Animation \bold on \e property syntax. This is especially useful -for repeating animations. +This \l Rectangle has \l Behavior objects applied to its \c x and \c y +properties. Whenever these properties change (in this case, when the mouse is +clicked within the parent \l Item), the PropertyAnimation objects defined +within the behaviors will be applied to these properties, thus animating the \l +Rectangle's movement to its new position. Unlike the method of \l {Animations +as Property Value Sources}{defining an animation as a property value source}, +which creates a one-time animation that animates a property to a known value, a +behavioral animation is an animation that is triggered \e {in response to} a +value change. -The following example creates a bouncing effect: -\snippet doc/src/snippets/declarative/animation.qml property-anim-1 +Any changes to these properties will trigger their animations. If \c x or \c y +were bound to other properties, and those properties changed, the animation +would be triggered. The \l{Behavior::}{enabled} property can be used to force a +\l Behavior to only apply under certain circumstances. -\image propanim.gif +Notice that unlike for property value source animations, the +PropertyAnimation's \l {PropertyAnimation::}{from} and \l +{PropertyAnimation::}{to} properties do not need to be defined because these +values are already provided, respectively, by the \l Rectangle's current values +and the new values set in the \c onClicked handler. If these properties were +defined anyway, they would override the default values. + +See the \l {declarative/animation/behaviors}{Behaviors example} for a +demonstration of behavioral animations. + + +\section2 Animations in a Signal Handler + +An animation can be created within a signal handler to be triggered when the +signal is received. For example: + +\snippet doc/src/snippets/declarative/animation-signalhandler.qml 0 + +The PropertyAnimation is triggered when the MouseArea is clicked, animating the +\c x and \c y properties to a value of 50 over 1000 milliseconds. Since the +animation is not bound to a particular object or property, it must define the +\l {PropertyAnimation::}{target} and \l {PropertyAnimation::}{property} (or \l +{PropertyAnimation::}{targets} and \l{PropertyAnimation::}{properties}) values. +The \l {PropertyAnimation::}{to} property is also required to specify the new +\c x and \c y values. + + +\section2 Standalone Animations + +Animations can also be created as ordinary QML objects that are not bound to +any particular objects and properties. An example: + +\snippet doc/src/snippets/declarative/animation-standalone.qml 0 + +A standalone animation is not running by default and must be started explicitly +using the \l {Animation::}{running} property or \l {Animation::}{start()} and +\l {Animation::}{stop()} methods. Since the animation is not bound to a +particular object or property, it must define the \l +{PropertyAnimation::}{target} and \l {PropertyAnimation::}{property} (or \l +{PropertyAnimation::}{targets} and \l{PropertyAnimation::}{properties}) values. +The \l {PropertyAnimation::}{to} property is also required to specify the new +\c x and \c y values. (The \l {PropertyAnimation::}{from} value can optionally +be provided.) + +Standalone animations are useful when an animation is not targeted towards a +single object property and the animation should be explicitly started and +stopped. + + +\section2 Transitions -When you assign an animation as a value source, you do not need to specify \c property -or \c target values; they are automatically selected for you. You do, however, need to specify a \c to value. -An animation specified as a value source will be \c running by default. +Transitions are used to describe the animations to be applied when a \l {QML +States}{state change} occurs. To create a transition, define a \l Transition +object and add it to an item's \l {Item::}{transitions} property. An example: -For example, here is a rectangle that uses a \l NumberAnimation value source to animate the movement -from its current position to an \c x value of 50. The animation starts immediately, and only the \c to -property is required: +\snippet doc/src/snippets/declarative/animation-transitions.qml 0 -\snippet doc/src/snippets/declarative/animation.qml property-anim-2 +When the \l Rectangle changes to the \e moved state, its \c x and \c y property +values are changed by the PropertyChanges object, and the PropertyAnimation +defined within the \l Transition is triggered on these properties. The +animation will not be applied at any time other than during the state change. -A property animation can also be specified as a resource that is manipulated from script. +Notice the example does not set any \l {PropertyAnimation::}{from} and \l +{PropertyAnimation::}{to} values for the PropertyAnimation. As a convenience, +these properties are automatically set to the values of \c x and \c y before +and after the state change, respectively. However, they can be explicitly set +if these values should be overrided. -\snippet doc/src/snippets/declarative/animation.qml property-anim-3 +Also notice the PropertyAnimation does not need to specify a \l +{PropertyAnimation::}{target} object; any \c x or \c y value of any object that +has changed during the state change will be animated. However, the target can +be set if the animation should be restricted to certain objects. -As can be seen, when an animation is used like this (as opposed to as a value source) you will need -to explicitly set the \c target and \c property to animate. This also the only case where -an animation needs to be started explictly by either setting the \c running property to -true or calling the \c start() method. +The top-level animations in a \l Transition are run in parallel. To run them +one after the other, use a SequentialAnimation, as shown below in \l {Grouping +Animations}. -Animations can be joined into a group using SequentialAnimation and ParallelAnimation. +See the \l Transition documentation for more information. -See the \l {declarative/animation/basics}{Animation basics example} for a demonstration of creating and combining multiple animations in QML. -\target state-transitions -\section1 Transitions +\section1 Animation Elements -\l Transition elements describe the animations to perform when \l{qmlstates}{state} changes occur. A transition -can only be triggered by a state change. +To create an animation, choose from one of the built-in QML animation elements. +While the above examples are demonstrated using PropertyAnimation, they could +have used other elements depending on the type of the property to be animated +and whether a single or multiple animations are required. -For example, a \l Transition could describe how an item moves from its initial position to its new position: +All animation elements inherit from the \l Animation element. It is not +possible to create \l Animation objects; instead, this element provides the +essential properties and methods for animation elements. For example, it allows +animations to be started and stopped through the \l {Animation::}{running} +property and the \l{Animation::}{start()} and \l{Animation::}{stop()} methods. +It can also define the number of \l {Animation::}{loops} for an animation. -\snippet doc/src/snippets/declarative/animation.qml transitions-1 -As can be seen, transitions make use of the same basic animation classes introduced above. -In the above example we have specified that we want to animate the \c x and \c y properties, but have not -specified the objects to animate or the \c to values. By default these values are supplied by the framework; -the animation will animate any \c targets whose \c x and \c y have changed, and the \c to values will be those -defined in the end state. You can always supply explicit values to override these implicit values when needed. +\section2 Property Animation Elements -\snippet doc/src/snippets/declarative/animation.qml transitions-2 +PropertyAnimation is the most basic animation element for animating a property. +It can be used to animate \c real, \c int, \c color, \c rect, \c point, \c size, and +\c vector3d properties. It is inherited by NumberAnimation, ColorAnimation, +RotationAnimation and Vector3dAnimation: NumberAnimation provides a more +efficient implementation for animating \c real and \c int properties, and +Vector3dAnimation does the same for \c vector3d properties. ColorAnimation +and RotationAnimation provide more specific attributes for animating color +and rotation changes. -QML transitions have selectors to determine which state changes a transition should apply to. -The following transition will only be triggered when we enter into the \c "details" state. -(The "*" value is a wildcard value that specifies the transition should be applied when changing -from \e any state to the "details" state.) +A ColorAnimation allows color values for the \l {ColorAnimation::}{from} +and \l {ColorAnimation::}{to} properties. The +following animates the rectangle's \l {Rectangle::color} property: -\code -Transition { - from: "*" - to: "details" - ... -} -\endcode +\snippet doc/src/snippets/declarative/animation-elements.qml color -Transitions can happen in parallel, in sequence, or in any combination of the two. By default, the top-level -animations in a transition will happen in parallel. The following example shows a rather complex transition -making use of both sequential and parallel animations: +RotationAnimation allows a rotation's direction to be specified. The following +animates the rectangle's \l {Item::rotation} property: -\snippet doc/src/snippets/declarative/animation.qml transitions-3 +\snippet doc/src/snippets/declarative/animation-elements.qml rotation +In addition, the following specialized animation elements are available: -See \l {declarative/animation/states}{States and Transitions example} for a simple example of how transitions can be applied. +\list +\o SmoothedAnimation: a specialized NumberAnimation that provides smooth +changes in animation when the target value changes +\o SpringAnimation: provides a spring-like animation with specialized +attributes such as \l {SpringAnimation::}{mass}, +\l{SpringAnimation::}{damping} and \l{SpringAnimation::}{epsilon} +\o ParentAnimation: used for animating a parent change (see ParentChange) +\o AnchorAnimation: used for animating an anchor change (see AnchorChanges) +\endlist +See their respective documentation pages for more details. -\section1 Property Behaviors -A property \l {Behavior}{behavior} specifies a default animation to run whenever the property's value changes, regardless -of what caused the change. The \c enabled property can be used to force a \l Behavior -to only apply under certain circumstances. +\section3 Easing + +Any PropertyAnimation-based animations can specify \l +{PropertyAnimation::easing.type}{easing attributes} to control the +easing curve applied when a property value is animated. These control the +effect of the animation on the property value, to provide visual effects like +bounce, acceleration and deceleration. + +For example, this modified version of an \l {Animations as Property Value +Sources}{earlier example} uses \c Easing.OutBounce to create a bouncing effect +when the animation reaches its target value: + +\snippet doc/src/snippets/declarative/animation-easing.qml 0 + +The \l{declarative/animation/easing}{easing example} visually demonstrates each +of the different easing types. + +\section2 Grouping Animations + +Multiple animations can be combined into a single animation using one of the +animation group elements: ParallelAnimation or SequentialAnimation. As their +names suggest, animations in a ParallelAnimation are run at the same time, +while animations in a SequentialAnimation are run one after the other. + +To run multiple animations, define the animations within an animation group. +The following example creates a SequentialAnimation that runs three animations +one after the other: a NumberAnimation, a PauseAnimation and another +NumberAnimation. The SequentialAnimation is applied as a \l{Animations as +Property Value Sources}{property value source animation} on the image's \c y +property, so that the animation starts as soon as the image is loaded, moving +the image up and down: + +\snippet doc/src/snippets/declarative/animation-groups.qml 0 +\image propanim.gif + +Since the SequentialAnimation is applied to the \c y property, the individual +animations within the group are automatically applied to the \c y property as +well; it is not required to set their \l{PropertyAnimation::}{properties} +values to a particular property. -In the following snippet, we specify that we want the \c x position of \c redRect to be animated -whenever it changes. The animation will last 300 milliseconds and use an \l{PropertyAnimation::easing.type}{Easing.InOutQuad} easing curve. +Animation groups can be nested. Here is a rather complex animation making use +of both sequential and parallel animations: -\snippet doc/src/snippets/declarative/animation.qml behavior +\snippet doc/src/snippets/declarative/animation-groups.qml 1 -Like using an animation as a value source, when used in a \l Behavior and animation does not need to specify -a \c target or \c property. +Once individual animations are placed into a SequentialAnimation or +ParallelAnimation, they can no longer be started and stopped independently. The +sequential or parallel animation must be started and stopped as a group. -To trigger this behavior, we could enter a state that changes \c x: +See the \l {declarative/animation/basics}{Animation basics example} for a +demonstration of creating and combining multiple animations in QML. -\qml -State { - name: "myState" - PropertyChanges { - target: redRect - x: 200 - ... - } -} -\endqml -Or, update \c x from a script: -\qml -MouseArea { - .... - onClicked: redRect.x = 24; -} -\endqml +\section2 Other Animation Elements -If \c x were bound to another property, triggering the binding would also trigger the behavior. +In addition, QML provides several other elements useful for animation: -If a state change has a transition animation matching a property with a \l Behavior, the transition animation -will override the \l Behavior for that state change. +\list +\o PauseAnimation: enables pauses during animations +\o ScriptAction: allows JavaScript to be executed during an animation, and can +be used together with StateChangeScript to reused existing scripts +\o PropertyAction: changes a property \e immediately during an animation, +without animating the property change +\endlist -The \l {declarative/animation/behaviors}{Behaviors example} shows how behaviors can be used to provide animations. +See their respective documentation pages for more details. */ diff --git a/doc/src/snippets/declarative/animation-behavioral.qml b/doc/src/snippets/declarative/animation-behavioral.qml new file mode 100644 index 0000000..dc79018 --- /dev/null +++ b/doc/src/snippets/declarative/animation-behavioral.qml @@ -0,0 +1,61 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module 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 Qt 4.7 + +Item { + width: 100; height: 100 + + Rectangle { + id: rect + width: 100; height: 100 + color: "red" + + Behavior on x { PropertyAnimation { duration: 500 } } + Behavior on y { PropertyAnimation { duration: 500 } } + } + + MouseArea { + anchors.fill: parent + onClicked: { rect.x = mouse.x; rect.y = mouse.y } + } +} +//![0] + diff --git a/doc/src/snippets/declarative/animation-easing.qml b/doc/src/snippets/declarative/animation-easing.qml new file mode 100644 index 0000000..e65c470 --- /dev/null +++ b/doc/src/snippets/declarative/animation-easing.qml @@ -0,0 +1,51 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module 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 Qt 4.7 + +Rectangle { + width: 100; height: 100 + color: "red" + + PropertyAnimation on x { to: 50; duration: 1000; easing.type: Easing.OutBounce } + PropertyAnimation on y { to: 50; duration: 1000; easing.type: Easing.OutBounce } +} +//![0] + diff --git a/doc/src/snippets/declarative/animation-elements.qml b/doc/src/snippets/declarative/animation-elements.qml new file mode 100644 index 0000000..7cb253e --- /dev/null +++ b/doc/src/snippets/declarative/animation-elements.qml @@ -0,0 +1,66 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module 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 Qt 4.7 + +Row { + +//![color] +Rectangle { + width: 100; height: 100 + + ColorAnimation on color { from: "red"; to: "yellow"; duration: 1000 } +} +//![color] + +//![rotation] +Item { + width: 300; height: 300 + + Rectangle { + width: 100; height: 100; anchors.centerIn: parent + color: "red" + + RotationAnimation on rotation { to: 90; direction: RotationAnimation.Clockwise } + } +} +//![rotation] + +} diff --git a/doc/src/snippets/declarative/animation-groups.qml b/doc/src/snippets/declarative/animation-groups.qml new file mode 100644 index 0000000..8a8f925 --- /dev/null +++ b/doc/src/snippets/declarative/animation-groups.qml @@ -0,0 +1,104 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module 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 Qt 4.7 + +Row { + +//![0] +Rectangle { + id: rect + width: 120; height: 200 + + Image { + id: img + source: "pics/qt.png" + anchors.horizontalCenter: parent.horizontalCenter + y: 0 + + SequentialAnimation on y { + loops: Animation.Infinite + NumberAnimation { to: rect.height - img.height; easing.type: Easing.OutBounce; duration: 2000 } + PauseAnimation { duration: 1000 } + NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 } + } + } +} +//![0] + +//![1] +Rectangle { + id: redRect + width: 100; height: 100 + color: "red" + + MouseArea { id: mouseArea; anchors.fill: parent } + + states: State { + name: "pressed"; when: mouseArea.pressed + PropertyChanges { target: redRect; color: "blue"; y: mouseArea.mouseY; width: mouseArea.mouseX } + } + + transitions: Transition { + + SequentialAnimation { + ColorAnimation { duration: 200 } + PauseAnimation { duration: 100 } + + ParallelAnimation { + NumberAnimation { + duration: 500 + easing.type: Easing.OutBounce + targets: redRect + properties: "y" + } + + NumberAnimation { + duration: 800 + easing.type: Easing.InOutQuad + targets: redRect + properties: "width" + } + } + } + } +} +//![1] + +} diff --git a/doc/src/snippets/declarative/animation-propertyvaluesource.qml b/doc/src/snippets/declarative/animation-propertyvaluesource.qml new file mode 100644 index 0000000..ac5f071 --- /dev/null +++ b/doc/src/snippets/declarative/animation-propertyvaluesource.qml @@ -0,0 +1,51 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module 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 Qt 4.7 + +Rectangle { + width: 100; height: 100 + color: "red" + + PropertyAnimation on x { to: 50; duration: 1000; loops: Animation.Infinite } + PropertyAnimation on y { to: 50; duration: 1000; loops: Animation.Infinite } +} +//![0] + diff --git a/doc/src/snippets/declarative/animation-signalhandler.qml b/doc/src/snippets/declarative/animation-signalhandler.qml new file mode 100644 index 0000000..749596c --- /dev/null +++ b/doc/src/snippets/declarative/animation-signalhandler.qml @@ -0,0 +1,55 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module 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 Qt 4.7 + +Rectangle { + id: rect + width: 100; height: 100 + color: "red" + + MouseArea { + anchors.fill: parent + onClicked: PropertyAnimation { target: rect; properties: "x,y"; to: 50; duration: 1000 } + } +} + +//![0] + diff --git a/doc/src/snippets/declarative/animation-standalone.qml b/doc/src/snippets/declarative/animation-standalone.qml new file mode 100644 index 0000000..d75fd92 --- /dev/null +++ b/doc/src/snippets/declarative/animation-standalone.qml @@ -0,0 +1,63 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module 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 Qt 4.7 + +Rectangle { + id: rect + width: 100; height: 100 + color: "red" + + PropertyAnimation { + id: animation + target: rect + properties: "x,y" + duration: 1000 + } + + MouseArea { + anchors.fill: parent + onClicked: { + animation.to = 50; + animation.running = true; + } + } +} +//![0] diff --git a/doc/src/snippets/declarative/animation-transitions.qml b/doc/src/snippets/declarative/animation-transitions.qml new file mode 100644 index 0000000..3265065 --- /dev/null +++ b/doc/src/snippets/declarative/animation-transitions.qml @@ -0,0 +1,62 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module 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 Qt 4.7 + +Rectangle { + id: rect + width: 100; height: 100 + color: "red" + + MouseArea { + anchors.fill: parent + onClicked: rect.state = "moved" + } + + states: State { + name: "moved" + PropertyChanges { target: rect; x: 50; y: 50 } + } + + transitions: Transition { + PropertyAnimation { properties: "x,y"; duration: 1000 } + } +} +//![0] diff --git a/doc/src/snippets/declarative/animation.qml b/doc/src/snippets/declarative/animation.qml deleted file mode 100644 index 65acd36..0000000 --- a/doc/src/snippets/declarative/animation.qml +++ /dev/null @@ -1,181 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). -** All rights reserved. -** Contact: Nokia Corporation (qt-info@nokia.com) -** -** This file is part of the QtDeclarative module of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:LGPL$ -** No Commercial Usage -** This file contains pre-release code and may not be distributed. -** You may use this file in accordance with the terms and conditions -** contained in the Technology Preview License Agreement accompanying -** this package. -** -** GNU Lesser General Public License Usage -** Alternatively, this file may be used under the terms of the GNU Lesser -** General Public License version 2.1 as published by the Free Software -** Foundation and appearing in the file LICENSE.LGPL included in the -** packaging of this file. Please review the following information to -** ensure the GNU Lesser General Public License version 2.1 requirements -** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. -** -** In addition, as a special exception, Nokia gives you certain additional -** rights. These rights are described in the Nokia Qt LGPL Exception -** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. -** -** If you have questions regarding the use of this file, please contact -** Nokia at qt-info@nokia.com. -** -** -** -** -** -** -** -** -** $QT_END_LICENSE$ -** -****************************************************************************/ -import Qt 4.7 - -Row { - -//![property-anim-1] -Rectangle { - id: rect - width: 120; height: 200 - - Image { - id: img - source: "pics/qt.png" - x: 60 - img.width/2 - y: 0 - - SequentialAnimation on y { - loops: Animation.Infinite - NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 } - PauseAnimation { duration: 1000 } - NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 } - } - } -} -//![property-anim-1] - -//![property-anim-2] -Rectangle { - width: 200; height: 200 - - Rectangle { - color: "red" - width: 50; height: 50 - NumberAnimation on x { to: 50 } - } -} -//![property-anim-2] - - -Item { -//![property-anim-3] -PropertyAnimation { - id: animation - target: image - property: "scale" - from: 1; to: 0.5 -} - -Image { - id: image - source: "pics/qt.png" - MouseArea { - anchors.fill: parent - onPressed: animation.start() - } -} -//![property-anim-3] -} - - -//![transitions-1] -transitions: [ - Transition { - NumberAnimation { - properties: "x,y" - easing.type: Easing.OutBounce - duration: 200 - } - } -] -//![transitions-1] - - -//![transitions-2] -Transition { - from: "*" - to: "MyState" - reversible: true - - SequentialAnimation { - NumberAnimation { - duration: 1000 - easing.type: Easing.OutBounce - - // animate myItem's x and y if they have changed in the state - target: myItem - properties: "x,y" - } - - NumberAnimation { - duration: 1000 - - // animate myItem2's y to 200, regardless of what happens in the state - target: myItem2 - property: "y" - to: 200 - } - } -} -//![transitions-2] - - -//![transitions-3] -Transition { - from: "*" - to: "MyState" - reversible: true - - SequentialAnimation { - ColorAnimation { duration: 1000 } - PauseAnimation { duration: 1000 } - - ParallelAnimation { - NumberAnimation { - duration: 1000 - easing.type: Easing.OutBounce - targets: box1 - properties: "x,y" - } - NumberAnimation { - duration: 1000 - targets: box2 - properties: "x,y" - } - } - } -} -//![transitions-3] - -//![behavior] -Rectangle { - id: redRect - color: "red" - width: 100; height: 100 - - Behavior on x { - NumberAnimation { duration: 300; easing.type: Easing.InOutQuad } - } -} -//![behavior] - -} diff --git a/doc/src/snippets/declarative/transition.qml b/doc/src/snippets/declarative/transition.qml index b884750..098d509 100644 --- a/doc/src/snippets/declarative/transition.qml +++ b/doc/src/snippets/declarative/transition.qml @@ -46,13 +46,18 @@ Rectangle { width: 100; height: 100 color: "red" + MouseArea { + id: mouseArea + anchors.fill: parent + } + states: State { - name: "moved" + name: "moved"; when: mouseArea.pressed PropertyChanges { target: rect; x: 50; y: 50 } } transitions: Transition { - PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad } + NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad } } } //![0] |