54 /*! |
54 /*! |
55 \qmlclass Transition QDeclarativeTransition |
55 \qmlclass Transition QDeclarativeTransition |
56 \since 4.7 |
56 \since 4.7 |
57 \brief The Transition element defines animated transitions that occur on state changes. |
57 \brief The Transition element defines animated transitions that occur on state changes. |
58 |
58 |
59 \sa {qmlstates}{States}, {state-transitions}{Transitions}, {QtDeclarative} |
59 A Transition defines the animations to be applied when a \l State change occurs. |
|
60 |
|
61 For example, the following \l Rectangle has two states: the default state, and |
|
62 an added "moved" state. In the "moved state, the rectangle's position changes |
|
63 to (50, 50). The added \l Transition specifies that when the rectangle |
|
64 changes between the default and the "moved" state, any changes |
|
65 to the \c x and \c y properties should be animated, using an \c Easing.InOutQuad. |
|
66 |
|
67 \snippet doc/src/snippets/declarative/transition.qml 0 |
|
68 |
|
69 To specify multiple transitions, specify \l Item::transitions as a list: |
|
70 |
|
71 \qml |
|
72 Item { |
|
73 ... |
|
74 transitions: [ |
|
75 Transition { ... } |
|
76 Transition { ... } |
|
77 ] |
|
78 } |
|
79 \endqml |
|
80 |
|
81 \sa {declarative/animation/states}{states example}, {qmlstates}{States}, {state-transitions}{Transitions}, {QtDeclarative} |
60 */ |
82 */ |
61 |
83 |
62 /*! |
84 /*! |
63 \internal |
85 \internal |
64 \class QDeclarativeTransition |
86 \class QDeclarativeTransition |
169 } |
191 } |
170 |
192 |
171 /*! |
193 /*! |
172 \qmlproperty string Transition::from |
194 \qmlproperty string Transition::from |
173 \qmlproperty string Transition::to |
195 \qmlproperty string Transition::to |
174 These properties are selectors indicating which state changes should trigger the transition. |
196 |
175 |
197 These properties indicate the state changes that trigger the transition. |
176 from is used in conjunction with to to determine when a transition should |
198 |
177 be applied. By default from and to are both "*" (any state). In the following example, |
199 The default values for these properties is "*" (that is, any state). |
178 the transition is applied when changing from state1 to state2. |
200 |
179 \code |
201 For example, the following transition has not set the \c to and \c from |
180 Transition { |
202 properties, so the animation is always applied when changing between |
181 from: "state1" |
203 the two states (i.e. when the mouse is pressed and released). |
182 to: "state2" |
204 |
183 ... |
205 \snippet doc/src/snippets/declarative/transition-from-to.qml 0 |
184 } |
206 |
185 \endcode |
207 If the transition was changed to this: |
|
208 |
|
209 \qml |
|
210 transitions: Transition { |
|
211 to: "brighter" |
|
212 ColorAnimation { duration: 1000 } |
|
213 } |
|
214 } |
|
215 \endqml |
|
216 |
|
217 The animation would only be applied when changing from the default state to |
|
218 the "brighter" state (i.e. when the mouse is pressed, but not on release). |
|
219 |
|
220 \sa reversible |
186 */ |
221 */ |
187 QString QDeclarativeTransition::fromState() const |
222 QString QDeclarativeTransition::fromState() const |
188 { |
223 { |
189 Q_D(const QDeclarativeTransition); |
224 Q_D(const QDeclarativeTransition); |
190 return d->fromState; |
225 return d->fromState; |
203 /*! |
238 /*! |
204 \qmlproperty bool Transition::reversible |
239 \qmlproperty bool Transition::reversible |
205 This property holds whether the transition should be automatically reversed when the conditions that triggered this transition are reversed. |
240 This property holds whether the transition should be automatically reversed when the conditions that triggered this transition are reversed. |
206 |
241 |
207 The default value is false. |
242 The default value is false. |
|
243 |
|
244 By default, transitions run in parallel and are applied to all state |
|
245 changes if the \l from and \l to states have not been set. In this |
|
246 situation, the transition is automatically applied when a state change |
|
247 is reversed, and it is not necessary to set this property to reverse |
|
248 the transition. |
|
249 |
|
250 However, if a SequentialAnimation is used, or if the \l from or \l to |
|
251 properties have been set, this property will need to be set to reverse |
|
252 a transition when a state change is reverted. For example, the following |
|
253 transition applies a sequential animation when the mouse is pressed, |
|
254 and reverses the sequence of the animation when the mouse is released: |
|
255 |
|
256 \snippet doc/src/snippets/declarative/transition-reversible.qml 0 |
|
257 |
|
258 If the transition did not set the \c to and \c reversible values, then |
|
259 on the mouse release, the transition would play the PropertyAnimation |
|
260 before the ColorAnimation instead of reversing the sequence. |
208 */ |
261 */ |
209 bool QDeclarativeTransition::reversible() const |
262 bool QDeclarativeTransition::reversible() const |
210 { |
263 { |
211 Q_D(const QDeclarativeTransition); |
264 Q_D(const QDeclarativeTransition); |
212 return d->reversible; |
265 return d->reversible; |
239 } |
292 } |
240 |
293 |
241 /*! |
294 /*! |
242 \qmlproperty list<Animation> Transition::animations |
295 \qmlproperty list<Animation> Transition::animations |
243 \default |
296 \default |
|
297 |
244 This property holds a list of the animations to be run for this transition. |
298 This property holds a list of the animations to be run for this transition. |
245 |
299 |
|
300 \qml |
|
301 Transition { |
|
302 PropertyAnimation { ... } |
|
303 NumberAnimation { ... } |
|
304 } |
|
305 \endqml |
|
306 |
246 The top-level animations are run in parallel. To run them sequentially, |
307 The top-level animations are run in parallel. To run them sequentially, |
247 you can create a single SequentialAnimation which contains all the animations, |
308 define them within a SequentialAnimation: |
248 and assign that to animations the animations property. |
309 |
249 \default |
310 \qml |
|
311 Transition { |
|
312 SequentialAnimation { |
|
313 PropertyAnimation { ... } |
|
314 NumberAnimation { ... } |
|
315 } |
|
316 } |
|
317 \endqml |
250 */ |
318 */ |
251 QDeclarativeListProperty<QDeclarativeAbstractAnimation> QDeclarativeTransition::animations() |
319 QDeclarativeListProperty<QDeclarativeAbstractAnimation> QDeclarativeTransition::animations() |
252 { |
320 { |
253 Q_D(QDeclarativeTransition); |
321 Q_D(QDeclarativeTransition); |
254 return QDeclarativeListProperty<QDeclarativeAbstractAnimation>(this, &d->animations, QDeclarativeTransitionPrivate::append_animation); |
322 return QDeclarativeListProperty<QDeclarativeAbstractAnimation>(this, &d->animations, QDeclarativeTransitionPrivate::append_animation); |