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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
/*!
\page qmlanimation.html
\target qmlanimation
\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 \l NumberAnimation
The following example creates a bouncing effect:
\code
Rect {
id: rect
width: 120; height: 200; color: "white"
Image {
id: img
source: "qt-logo.png"
x: 60-img.width/2
y: 0
y: SequentialAnimation {
running: true
repeat: true
NumberAnimation { to: 200-img.height; easing: "easeOutBounce"; duration: 2000 }
PauseAnimation { duration: 1000 }
NumberAnimation { to: 0; easing: "easeOutQuad"; duration: 1000 }
}
}
}
\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"
SetProperties {
target: myrect
x: 50
}
SetProperties {
target: myrect
y: 50
}
}
]
}
\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 {
NumberAnimation {
properties: "x,y"
easing: "easeOutBounce"
duration: 200
}
}
]
\endcode
QML transitions can use selectors to determine which state changes a transition should apply to:
\code
Transition {
fromState: "*"
toState: "Details"
...
}
\endcode
Transitions can happen in parallel, in sequence, or in any combination of the two:
\code
Transition {
fromState: "*"
toState: "MyState"
reversible: true
SequentialAnimation {
ColorAnimation {
property: "color"
duration: 1000
}
PauseAnimation {
duration: 1000
}
ParallelAnimation {
NumberAnimation {
duration: 1000
easing: "easeOutBounce"
target: box1
properties: "x,y"
}
NumberAnimation {
duration: 1000
target: box2
properties: "x,y"
}
}
}
}
\endcode
\section1 Property Behaviors
\note Property behaviors are currently experimental.
*/
|
