PathInterpolator QML Type

Specifies how to manually animate along a path. More...

Import Statement: import QtQuick 2.15

List of all members, including inherited members

Properties

angle : real
path : Path
progress : real
x : real
y : real

Detailed Description

PathInterpolator provides x, y, and angle information for a particular progress along a path.

In the following example, we animate a green rectangle along a bezier path.

 import QtQuick 2.0

 Rectangle {
     width: 400
     height: 400

     PathInterpolator {
         id: motionPath

         path: Path {
             startX: 0; startY: 0

             PathCubic {
                 x: 350; y: 350

                 control1X: 350; control1Y: 0
                 control2X: 0; control2Y: 350
             }
         }

         NumberAnimation on progress { from: 0; to: 1; duration: 2000 }
     }

     Rectangle {
         width: 50; height: 50
         color: "green"

         //bind our attributes to follow the path as progress changes
         x: motionPath.x
         y: motionPath.y
         rotation: motionPath.angle
     }
 }

Property Documentation

x : real

y : real

These properties hold the position of the path at progress.

angle : real

This property holds the angle of the path tangent at progress.

Angles are reported clockwise, with zero degrees at the 3 o'clock position.

path : Path

This property holds the path to interpolate.

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

progress : real

This property holds the current progress along the path.

Typical usage of PathInterpolator is to set the progress (often via a NumberAnimation), and read the corresponding values for x, y, and angle (often via bindings to these values).

Progress ranges from 0.0 to 1.0.

Contents

PathInterpolator QML Type

Properties

Detailed Description

Property Documentation