src/quick/doc/src/appdevguide/usecases/animations.qdoc

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   5 **
   6 ** This file is part of the documentation of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:FDL$
   9 ** GNU Free Documentation License
  10 ** Alternatively, this file may be used under the terms of the GNU Free
  11 ** Documentation License version 1.3 as published by the Free Software
  12 ** Foundation and appearing in the file included in the packaging of
  13 ** this file.
  14 **
  15 ** Other Usage
  16 ** Alternatively, this file may be used in accordance with the terms
  17 ** and conditions contained in a signed written agreement between you
  18 ** and Nokia.
  19 **
  20 **
  21 **
  22 **
  23 **
  24 ** $QT_END_LICENSE$
  25 **
  26 ****************************************************************************/
  27 /*!
  28 \page qtquick-usecase-animations.html
  29 \title Usecase - Animations In QML
  30 \brief Example of how to include animations in QML applications
  31
  32 QtQuick provides the ability to animate properties. Animating properties allows property values to move through
  33 intermediate values instead of immediately changing to the target value. To animate the position of an item, you can
  34 animate the properties that controle the item's position, x and y for example, so that the item's position
  35 changes each frame on the way to the target position.
  36
  37 \section1 Fluid UIs
  38
  39 QML was designed to facilitate the creation of fluid UIs. These are user interfaces where the UI elements animate when
  40 they move instead of elements appearing, disappearing, or jumping. Qt Quick provides two simple ways to have UI
  41 elements move with animation instead of instantly appearing at their new location.
  42
  43 \section2 States and Transitions
  44
  45 QtQuick allows you to declare various UI states in \l State objects. These states are comprised of property changes from a
  46 base state, and can be a useful way of organizing your UI logic. Transitions are objects you can associate with an item
  47 to define how its properties will animate when they change due to a state change.
  48
  49 States and transitions for an item can be declared with the \l Item::states and \l Item::transitions properties.
  50 States are declared inside the states list property of an item, usually the root item of the component. Transitions
  51 defined on the same item are used to animate the changes in the state. Here is an example.
  52
  53 \snippet qml/usecases/animations.qml states
  54
  55 \section2 Animating Property Changes.
  56
  57 Behaviors can be used to specify an animation for a property to use when it changes. This is then applied to all
  58 changes, regardless of their source. The following example animates a button moving around the
  59 screen using behaviors.
  60
  61 \snippet qml/usecases/animations.qml behave
  62
  63 \section1 Other Animations
  64
  65 Not all animations have to be tied to a specific property or state. You can also create animations more generally, and
  66 specify target items and properties inside the animation. Here are some examples of different ways to do this:
  67
  68 \snippet qml/usecases/animations.qml constant
  69 \snippet qml/usecases/animations.qml scripted
  70 \image qml-uses-animation.png
  71
  72 More information about animations can be found on the \l{Important Concepts in Qt Quick - States, Transitions and
  73 Animations} page.
  74 */