PathAnimation QML Type

Animates an item along a path. More...

Import Statement:	import QtQuick 2.15
Since:	Qt 5.0
Inherits:	Animation

• List of all members, including inherited members

Properties

• anchorPoint : point
• duration : int
• easing
  • easing.amplitude : real
  • easing.bezierCurve : list<real>
  • easing.overshoot : real
  • easing.period : real
  • easing.type : enumeration
• endRotation : real
• orientation : enumeration
• orientationEntryDuration : real
• orientationExitDuration : real
• path : Path
• target : Item

Detailed Description

When used in a transition, the path can be specified without start or end points, for example:

PathAnimation {
    path: Path {
        //no startX, startY
        PathCurve { x: 100; y: 100}
        PathCurve {}    //last element is empty with no end point specified
    }
}

In the above case, the path start will be the item's current position, and the path end will be the item's target position in the target state.

See also Animation and Transitions in Qt Quick and PathInterpolator.

Property Documentation

anchorPoint : point

This property holds the anchor point for the item being animated.

By default, the upper-left corner of the target (its 0,0 point) will be anchored to (or follow) the path. The anchorPoint property can be used to specify a different point for anchoring. For example, specifying an anchorPoint of 5,5 for a 10x10 item means the center of the item will follow the path.

duration : int

This property holds the duration of the animation, in milliseconds.

The default value is 250.

easing.amplitude : real

the easing curve used for the animation.

To specify an easing curve you need to specify at least the type. For some curves you can also specify amplitude, period, overshoot or custom bezierCurve data. The default easing curve is Easing.Linear.

See the PropertyAnimation::easing.type documentation for information about the different types of easing curves.

endRotation : real

This property holds the ending rotation for the target.

If an orientation has been specified for the PathAnimation, and the path doesn't end with the item at the desired rotation, the endRotation property can be used to manually specify an end rotation.

This property is typically used with orientationExitDuration, as specifying an endRotation without an orientationExitDuration may cause a jump to the final rotation, rather than a smooth transition.

orientation : enumeration

This property controls the rotation of the item as it animates along the path.

If a value other than Fixed is specified, the PathAnimation will rotate the item to achieve the specified orientation as it travels along the path.

• PathAnimation.Fixed (default) - the PathAnimation will not control the rotation of the item.
• PathAnimation.RightFirst - The right side of the item will lead along the path.
• PathAnimation.LeftFirst - The left side of the item will lead along the path.
• PathAnimation.BottomFirst - The bottom of the item will lead along the path.
• PathAnimation.TopFirst - The top of the item will lead along the path.

orientationEntryDuration : real

This property holds the duration (in milliseconds) of the transition in to the orientation.

If an orientation has been specified for the PathAnimation, and the starting rotation of the item does not match that given by the orientation, orientationEntryDuration can be used to smoothly transition from the item's starting rotation to the rotation given by the path orientation.

orientationExitDuration : real

This property holds the duration (in milliseconds) of the transition out of the orientation.

If an orientation and endRotation have been specified for the PathAnimation, orientationExitDuration can be used to smoothly transition from the rotation given by the path orientation to the specified endRotation.

path : Path

This property holds the path to animate along.

For more information on defining a path see the Path documentation.

target : Item

This property holds the item to animate.