1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
/****************************************************************************
**
** 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:FDL$
** GNU Free Documentation License
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file.
**
** Other Usage
** Alternatively, this file may be used in accordance with the terms
** and conditions contained in a signed written agreement between you
** and Nokia.
**
**
**
**
**
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page qtquick-concepts-statesanimations.html
\title Concepts - States And Animations
\brief Description of the concepts of states, transitions and animations in Qt Quick
This page describes the concept of states, state transitions, and property
animations. It details which concepts are important and why, and how those
concepts interrelate. It also provides links to in-depth detail about the QML
types that Qt Quick provides to implement those concepts.
\section1 States
The state of a particular visual item is the set of information which describes
how and where the individual component parts of the visual item are displayed
within it, and all the data associated with that state. Most visual items in a
user-interface will have a limited number of states, each with well-defined
properties.
For example, an element in a list may be either selected or not, and if
selected, it may either be the currently active single selection or it may be
part of a selection group.
Each of those states may have certain associated visual appearance (neutral,
highlighted, expanded, and so forth).
Qt Quick provides a \c{State} element with properties which define its semantics
and can be used to trigger behavior or animations. See the documentation about
\l{qtquick-concepts-statesanimations-states.html}{Qt Quick States} for more
information.
\section1 Transitions
When a visual item transitions from one state to another, the appearance of
that item will change. A transition is an "edge" between two states. It may
trigger other events to occur, as other parts of the application may have
behavior which is triggered when a certain state is entered or left.
Qt Quick provides the \c{Transition} element which has properties which define
what will occur when the application changes from one state to another. See
the documentation on
\l{qtquick-concepts-statesanimations-animations.html#transitions-during-state-changes}
{Transitions during State Changes} for more information about transitions.
\section1 Animations
When transitioning between states, a fluid animation can be used to aid the
user during the transition. Abrupt and unexpected changes to the visual
canvas result in a suboptimal user-experience and should be avoided.
If an element in a list becomes selected, the color change (from neutral to
highlighted) can be animated. If the position of the element in the list is
changed, it can be moved in an fluidly animated fashion so that the eye of the
user can track the change.
These types of animations are supported in Qt Quick through various animation
and transition elements. See the documentation on
\l{qtquick-concepts-statesanimations-animations.html}
{Animations and Transitions In Qt Quick} for information about these elements
and how to use them.
Animations are not only related to states and transitions between states; for
example, an animation might be triggered by other events, which are not
associated with a distinct state. It is often beneficial to always animate
changes to certain properties of visual items, regardless of the cause of the
change (for example, opacity effects).
This type of animation is supported in Qt Quick with the \c{Behavior} element
through the \tt{"Behavior on <Property>"} syntax. Please see the documentation
about
\l{qtquick-concepts-statesanimations-animations.html#default-animation-as-behaviors}
{default property animation behaviors} for more information about the Behavior
element and how to use it.
It is important to note, however, that using default property animations
(using Behavior elements) as well as state-transition animations can sometimes
results in undefined behavior occurring. Please see the documentation about
\l{qtquick-qmltypereference-behaviors.html}
{using Qt Quick Behaviors with States} for more information about this topic.
\section1 Animated Sprites
The concept of animated sprites is separate to the concept of animations as
used elsewhere on this page. If you want to create or use an animated image
or sprite, please see the documentation about
\l{qtquick-concepts-effects-sprites.html}{sprite animations}.
*/
|
