src/quick/doc/src/concepts/statesanimations/topic.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 /*!
  29 \page qtquick-statesanimations-topic.html
  30 \title Important Concepts in Qt Quick - States, Transitions and Animations
  31 \brief Description of the concepts of states, transitions and animations in Qt Quick
  32
  33 In any modern user-interface, transitioning between states and animating
  34 the user-interface is highly beneficial.  These are first-class concepts in
  35 Qt Quick.
  36
  37 This page describes the concept of states, state transitions, and property
  38 animations.  It details which concepts are important and why, and how those
  39 concepts interrelate.  It also provides links to in-depth detail about the QML
  40 types that Qt Quick provides to implement those concepts.
  41
  42 \section1 States
  43
  44 The state of a particular visual item is the set of information which describes
  45 how and where the individual component parts of the visual item are displayed
  46 within it, and all the data associated with that state.  Most visual items in a
  47 user-interface will have a limited number of states, each with well-defined
  48 properties.
  49
  50 For example, an element in a list may be either selected or not, and if
  51 selected, it may either be the currently active single selection or it may be
  52 part of a selection group.
  53
  54 Each of those states may have certain associated visual appearance (neutral,
  55 highlighted, expanded, and so forth).
  56
  57 Qt Quick provides a \c{State} element with properties which define its semantics
  58 and can be used to trigger behavior or animations.  See the documentation about
  59 \l{qtquick-statesanimations-states.html}{Qt Quick States} for more
  60 information.
  61
  62 \section1 Transitions
  63
  64 When a visual item transitions from one state to another, the appearance of
  65 that item will change.  A transition is an "edge" between two states.  It may
  66 trigger other events to occur, as other parts of the application may have
  67 behavior which is triggered when a certain state is entered or left.
  68
  69 Qt Quick provides the \c{Transition} element which has properties which define
  70 what will occur when the application changes from one state to another.  See
  71 the documentation on
  72 \l{qtquick-statesanimations-animations.html#transitions-during-state-changes}
  73 {Transitions during State Changes} for more information about transitions.
  74
  75 \section1 Animations
  76
  77 When transitioning between states, a fluid animation can be used to aid the
  78 user during the transition.  Abrupt and unexpected changes to the visual
  79 canvas result in a suboptimal user-experience and should be avoided.
  80
  81 If an element in a list becomes selected, the color change (from neutral to
  82 highlighted) can be animated.  If the position of the element in the list is
  83 changed, it can be moved in an fluidly animated fashion so that the eye of the
  84 user can track the change.
  85
  86 These types of animations are supported in Qt Quick through various animation
  87 and transition elements.  See the documentation on
  88 \l{qtquick-statesanimations-animations.html}
  89 {Animations and Transitions In Qt Quick} for information about these elements
  90 and how to use them.
  91
  92
  93 \section1 Animating Property Assignments
  94
  95 Animations are not only related to states and transitions between states.  For
  96 example, an animation might be triggered by other events, which are not
  97 associated with a distinct state.
  98
  99 It is often beneficial to always animate changes to certain properties of
 100 visual items, regardless of the cause of the change (for example, opacity
 101 effects).  Qt Quick provides the \l Behavior type which allows the client to
 102 specify animation behavior for changes to properties.  The \l Behavior type
 103 is an example of a QML object
 104 \l{qtqml-cppintegration-definetypes.html#property-modifier-types}
 105 {property modifier}.
 106
 107 Please see the documentation about
 108 \l{qtquick-statesanimations-animations.html#default-animation-as-behaviors}
 109 {default property animations} for more information about using the \l Behavior
 110 element to provide default property change animations.
 111
 112 It is important to note, that using default property animations (via the
 113 \l Behavior type) in combination with state-transition animations can sometimes
 114 result in undefined behavior occurring.  Please see the documentation about
 115 \l{qtquick-statesanimations-behaviors.html}
 116 {using Qt Quick Behaviors with States} for more information about this topic.
 117
 118 \section1 Animated Sprites
 119
 120 The concept of animated sprites is separate to the concept of animations as
 121 used elsewhere on this page.  If you want to create or use an animated image
 122 or sprite, please see the documentation about
 123 \l{qtquick-effects-sprites.html}{sprite animations}.
 124
 125 */