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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
/*!
\page animation.html
\target animation
\title QML Animation
QML supports three different forms of animation - basic property animation,
states and transitions and property behaviors.
\section1 Property Animation
Animation in QML is done by animating properties of objects.
Any property of a recognizable type can be animated. Currently those types include:
\list
\o qreal
\o int
\o Most of QVariant's built-in types
\endlist
Animations can also involve numerous properties on numerous objects.
Other Features:
\list
\o Support for a large set of parameterized easing curves. (based on the Penner easing equations)
\o Animation synchronization
\endlist
The simplest form of animation is using \c <NumericAnimation/>
The following example creates a bouncing effect:
\code
<Rect id="rect" width="120" height="200" color="white">
<Image id="img" file="pics/qtlogo.png"
x="{60-img.width/2}" y="{200-img.height}">
<y>
<SequentialAnimation running="true" repeat="true">
<NumericAnimation to="{200-img.height}"
easing="easeOutBounce(amplitude:100)"
duration="2000" />
<PauseAnimation duration="1000" />
</SequentialAnimation>
</y>
</Image>
</Rect>
\endcode
\image propanim.gif
\target states-transitions
\section1 States and Transitions
\section2 States
QML states describe user interface configurations, including:
\list
\o What UI elements are present
\o The properties of those elements (including how they behave)
\o What actions are available
\endlist
A state can also be thought of as a set of batched changes from a default configuration.
Examples of states in modern UI:
\list
\o A Contacts application has a 'View Contact' state and an 'Edit Contact' State. In the first state the information presented is static (using labels), and in the second it is editable (using editors).
\o A button has a pressed and unpressed state. When pressed the text moves down and to the right, and the button has a slightly darker appearance.
\endlist
In QML:
\list
\o Any object can use states.
\o There is a default state. The default state can be explicitly set.
\o A state can affect other the properties of other objects, not just the object owning the state (and not just that object's children).
\endlist
The following example shows a simple use of states. In the default state \c myrect is positioned at 0,0. In the 'moved' state it is positioned at 50,50.
\code
<Item>
<Rect id="myrect" width="100" height="100"/>
<states>
<State name="moved">
<SetProperty target="{myrect}" property="x" value="50"/>
<SetProperty target="{myrect}" property="y" value="50"/>
</State>
</states>
</Item>
\endcode
\section2 Transitions
QML transitions describe animations to perform when state changes occur.
For the previous example, a transition could describe how \c myrect moved from its initial position to its new position:
\code
<transitions>
<Transition>
<NumericAnimation properties="x,y" easing="easeOutBounce" duration="200" />
</Transition>
</transitions>
\endcode
QML transitions can use selectors to determine which state changes a transition should apply to:
\code
<Transition fromState="*" toState="Details">
...
</Transition>
\endcode
Transitions can happen in parallel, in sequence, or in any combination of the two:;
\code
<Transition fromState="*" toState="MyState" reversible="true" >
<SequentialAnimation>
<ColorAnimation duration="1000" />
<PauseAnimation duration="1000" />
<ParallelAnimation>
<NumericAnimation duration="1000" easing="easeOutBounce" target="{box1}" properties="x,y" />
<NumericAnimation duration="1000" target="{box2}" properties="x,y" />
</ParallelAnimation>
</SequentialAnimation>
</Transition>
\endcode
\section1 Property Behaviors
\todo Document. Should we remove property behaviour altogether?
*/
|
