Home · All Classes · All Functions · Overviews

QML EaseFollow Element Reference

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

Properties

Detailed Description

The EaseFollow smoothly animates a property's value to a set target value using an ease in/out quad easing curve. If the target value changes while the animation is in progress, the easing curves used to animate to the old and the new target values are spliced together to avoid any obvious visual glitches.

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.6

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

     Rectangle {
         color: "green"
         width: 60; height: 60;
         x: -5; y: -5;
         x: EaseFollow { source: rect1.x - 5; velocity: 200 }
         y: EaseFollow { source: rect1.y - 5; 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 EaseFollow 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.


Property Documentation

duration : qreal

This property holds the animation duration used when tracking the source.

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


enabled : bool

This property holds whether the target will track the source.


maximumEasingTime : qreal

This property specifies the maximum time 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 EaseFollow behaves if an animation direction is reversed.

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


source : qreal

This property holds the source value which will be tracked.

Bind to a property in order to track its changes.


velocity : qreal

This property holds the average velocity allowed when tracking the source.

The default velocity of EaseFollow is 200 units/second.

Setting this to -1 disables the velocity value.



Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt 4.7.0