251 \qmlclass SmoothedAnimation QDeclarativeSmoothedAnimation |
251 \qmlclass SmoothedAnimation QDeclarativeSmoothedAnimation |
252 \since 4.7 |
252 \since 4.7 |
253 \inherits NumberAnimation |
253 \inherits NumberAnimation |
254 \brief The SmoothedAnimation element allows a property to smoothly track a value. |
254 \brief The SmoothedAnimation element allows a property to smoothly track a value. |
255 |
255 |
256 The SmoothedAnimation animates a property's value to a set target value |
256 A SmoothedAnimation animates a property's value to a set target value |
257 using an ease in/out quad easing curve. If the animation is restarted |
257 using an ease in/out quad easing curve. When the target value changes, |
258 with a different target value, the easing curves used to animate to the old |
258 the easing curves used to animate between the old and new target values |
259 and the new target values are smoothly spliced together to avoid any obvious |
259 are smoothly spliced together to create a smooth movement to the new |
260 visual glitches by maintaining the current velocity. |
260 target value that maintains the current velocity. |
261 |
261 |
262 The property animation is configured by setting the velocity at which the |
262 The follow example shows one \l Rectangle tracking the position of another |
263 animation should occur, or the duration that the animation should take. |
263 using SmoothedAnimation. The green rectangle's \c x and \c y values are |
264 If both a velocity and a duration are specified, the one that results in |
264 bound to those of the red rectangle. Whenever these values change, the |
|
265 green rectangle smoothly animates to its new position: |
|
266 |
|
267 \snippet doc/src/snippets/declarative/smoothedanimation.qml 0 |
|
268 |
|
269 A SmoothedAnimation can be configured by setting the \l velocity at which the |
|
270 animation should occur, or the \l duration that the animation should take. |
|
271 If both the \l velocity and \l duration are specified, the one that results in |
265 the quickest animation is chosen for each change in the target value. |
272 the quickest animation is chosen for each change in the target value. |
266 |
273 |
267 For example, animating from 0 to 800 will take 4 seconds if a velocity |
274 For example, animating from 0 to 800 will take 4 seconds if a velocity |
268 of 200 is set, will take 8 seconds with a duration of 8000 set, and will |
275 of 200 is set, will take 8 seconds with a duration of 8000 set, and will |
269 take 4 seconds with both a velocity of 200 and a duration of 8000 set. |
276 take 4 seconds with both a velocity of 200 and a duration of 8000 set. |
270 Animating from 0 to 20000 will take 10 seconds if a velocity of 200 is set, |
277 Animating from 0 to 20000 will take 10 seconds if a velocity of 200 is set, |
271 will take 8 seconds with a duration of 8000 set, and will take 8 seconds |
278 will take 8 seconds with a duration of 8000 set, and will take 8 seconds |
272 with both a velocity of 200 and a duration of 8000 set. |
279 with both a velocity of 200 and a duration of 8000 set. |
273 |
280 |
274 The follow example shows one rectangle tracking the position of another. |
|
275 \code |
|
276 import Qt 4.7 |
|
277 |
|
278 Rectangle { |
|
279 width: 800; height: 600; color: "blue" |
|
280 |
|
281 Rectangle { |
|
282 color: "green" |
|
283 width: 60; height: 60; |
|
284 x: rect1.x - 5; y: rect1.y - 5; |
|
285 Behavior on x { SmoothedAnimation { velocity: 200 } } |
|
286 Behavior on y { SmoothedAnimation { velocity: 200 } } |
|
287 } |
|
288 |
|
289 Rectangle { |
|
290 id: rect1 |
|
291 color: "red" |
|
292 width: 50; height: 50; |
|
293 } |
|
294 |
|
295 focus: true |
|
296 Keys.onRightPressed: rect1.x = rect1.x + 100 |
|
297 Keys.onLeftPressed: rect1.x = rect1.x - 100 |
|
298 Keys.onUpPressed: rect1.y = rect1.y - 100 |
|
299 Keys.onDownPressed: rect1.y = rect1.y + 100 |
|
300 } |
|
301 \endcode |
|
302 |
|
303 The default velocity of SmoothedAnimation is 200 units/second. Note that if the range of the |
281 The default velocity of SmoothedAnimation is 200 units/second. Note that if the range of the |
304 value being animated is small, then the velocity will need to be adjusted |
282 value being animated is small, then the velocity will need to be adjusted |
305 appropriately. For example, the opacity of an item ranges from 0 - 1.0. |
283 appropriately. For example, the opacity of an item ranges from 0 - 1.0. |
306 To enable a smooth animation in this range the velocity will need to be |
284 To enable a smooth animation in this range the velocity will need to be |
307 set to a value such as 0.5 units/second. Animating from 0 to 1.0 with a velocity |
285 set to a value such as 0.5 units/second. Animating from 0 to 1.0 with a velocity |
308 of 0.5 will take 2000 ms to complete. |
286 of 0.5 will take 2000 ms to complete. |
309 |
287 |
310 \sa SpringFollow |
288 Like any other animation element, a SmoothedAnimation can be applied in a |
|
289 number of ways, including transitions, behaviors and property value |
|
290 sources. The \l PropertyAnimation documentation shows a variety of methods |
|
291 for creating animations. |
|
292 |
|
293 \sa SpringAnimation, NumberAnimation, {QML Animation}, {declarative/animation/basics}{Animation basics example} |
311 */ |
294 */ |
312 |
295 |
313 QDeclarativeSmoothedAnimation::QDeclarativeSmoothedAnimation(QObject *parent) |
296 QDeclarativeSmoothedAnimation::QDeclarativeSmoothedAnimation(QObject *parent) |
314 : QDeclarativeNumberAnimation(*(new QDeclarativeSmoothedAnimationPrivate), parent) |
297 : QDeclarativeNumberAnimation(*(new QDeclarativeSmoothedAnimationPrivate), parent) |
315 { |
298 { |
386 /*! |
369 /*! |
387 \qmlproperty enumeration SmoothedAnimation::reversingMode |
370 \qmlproperty enumeration SmoothedAnimation::reversingMode |
388 |
371 |
389 Sets how the SmoothedAnimation behaves if an animation direction is reversed. |
372 Sets how the SmoothedAnimation behaves if an animation direction is reversed. |
390 |
373 |
391 If reversing mode is \c SmoothedAnimation.Eased, the animation will smoothly decelerate, and |
374 Possible values are: |
392 then reverse direction. If the reversing mode is \c SmoothedAnimation.Immediate, the |
375 |
393 animation will immediately begin accelerating in the reverse direction, |
376 \list |
394 begining with a velocity of 0. If the reversing mode is \c SmoothedAnimation.Sync, the |
377 \o SmoothedAnimation.Eased (default) - the animation will smoothly decelerate, and then reverse direction |
395 property is immediately set to the target value. |
378 \o SmoothedAnimation.Immediate - the animation will immediately begin accelerating in the reverse direction, begining with a velocity of 0 |
|
379 \o SmoothedAnimation.Sync - the property is immediately set to the target value |
|
380 \endlist |
396 */ |
381 */ |
397 QDeclarativeSmoothedAnimation::ReversingMode QDeclarativeSmoothedAnimation::reversingMode() const |
382 QDeclarativeSmoothedAnimation::ReversingMode QDeclarativeSmoothedAnimation::reversingMode() const |
398 { |
383 { |
399 Q_D(const QDeclarativeSmoothedAnimation); |
384 Q_D(const QDeclarativeSmoothedAnimation); |
400 return (QDeclarativeSmoothedAnimation::ReversingMode) d->anim->reversingMode; |
385 return (QDeclarativeSmoothedAnimation::ReversingMode) d->anim->reversingMode; |