Qt Reference Documentation

QML SmoothedAnimation Element

[Inherits NumberAnimation]

The SmoothedAnimation element allows a property to smoothly track a value. More...

Properties

Detailed Description

The SmoothedAnimation animates a property's value to a set target value using an ease in/out quad easing curve. If the animation is restarted with a different target value, the easing curves used to animate to the old and the new target values are smoothly spliced together to avoid any obvious visual glitches by maintaining the current velocity.

The property animation is configured by setting the velocity at which the animation should occur, or the duration that the animation should take. If both a velocity and a duration are specified, the one that results in the quickest animation is chosen for each change in the target value.

For example, animating from 0 to 800 will take 4 seconds if a velocity of 200 is set, will take 8 seconds with a duration of 8000 set, and will take 4 seconds with both a velocity of 200 and a duration of 8000 set. Animating from 0 to 20000 will take 10 seconds if a velocity of 200 is set, will take 8 seconds with a duration of 8000 set, and will take 8 seconds with both a velocity of 200 and a duration of 8000 set.

The follow example shows one rectangle tracking the position of another.

 import Qt 4.7

 Rectangle {
     width: 800; height: 600; color: "blue"

     Rectangle {
         color: "green"
         width: 60; height: 60;
         x: rect1.x - 5; y: rect1.y - 5;
         Behavior on x { SmoothedAnimation { velocity: 200 } }
         Behavior on y { SmoothedAnimation { velocity: 200 } }
     }

     Rectangle {
         id: rect1
         color: "red"
         width: 50; height: 50;
     }

     focus: true
     Keys.onRightPressed: rect1.x = rect1.x + 100
     Keys.onLeftPressed: rect1.x = rect1.x - 100
     Keys.onUpPressed: rect1.y = rect1.y - 100
     Keys.onDownPressed: rect1.y = rect1.y + 100
 }

The default velocity of SmoothedAnimation is 200 units/second. Note that if the range of the value being animated is small, then the velocity will need to be adjusted appropriately. For example, the opacity of an item ranges from 0 - 1.0. To enable a smooth animation in this range the velocity will need to be set to a value such as 0.5 units/second. Animating from 0 to 1.0 with a velocity of 0.5 will take 2000 ms to complete.

See also SpringFollow, QML Animation, and Animation basics example.


Property Documentation

duration : int

This property holds the animation duration, in msecs, used when tracking the source.

Setting this to -1 (the default) disables the duration value.


maximumEasingTime : int

This property specifies the maximum time, in msecs, an "eases" during the follow should take. Setting this property causes the velocity to "level out" after at a time. Setting a negative value reverts to the normal mode of easing over the entire animation duration.

The default value is -1.


reversingMode : enumeration

Sets how the SmoothedAnimation behaves if an animation direction is reversed.

If reversing mode is SmoothedAnimation.Eased, the animation will smoothly decelerate, and then reverse direction. If the reversing mode is SmoothedAnimation.Immediate, the animation will immediately begin accelerating in the reverse direction, begining with a velocity of 0. If the reversing mode is SmoothedAnimation.Sync, the property is immediately set to the target value.


velocity : real

This property holds the average velocity allowed when tracking the 'to' value.

The default velocity of SmoothedAnimation is 200 units/second.

Setting this to -1 disables the velocity value.


X