QML SmoothedAnimation Element

Detailed Description

A SmoothedAnimation animates a property's value to a set target value using an ease in/out quad easing curve. When the target value changes, the easing curves used to animate between the old and new target values are smoothly spliced together to create a smooth movement to the new target value that maintains the current velocity.

The follow example shows one Rectangle tracking the position of another using SmoothedAnimation. The green rectangle's x and y values are bound to those of the red rectangle. Whenever these values change, the green rectangle smoothly animates to its new position:

 import QtQuick 1.0

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

     Rectangle {
         width: 60; height: 60
         x: rect1.x - 5; y: rect1.y - 5
         color: "green"

         Behavior on x { SmoothedAnimation { velocity: 200 } }
         Behavior on y { SmoothedAnimation { velocity: 200 } }
     }

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

     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
 }

A SmoothedAnimation can be configured by setting the velocity at which the animation should occur, or the duration that the animation should take. If both the velocity and 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 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.

Like any other animation element, a SmoothedAnimation can be applied in a number of ways, including transitions, behaviors and property value sources. The QML Animation and Transitions documentation shows a variety of methods for creating animations.

See also SpringAnimation, NumberAnimation, QML Animation and Transitions, and Animation basics example.

Property Documentation