PathInterpolator QML Type

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

Import Statement: import QtQuick 2.12


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

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.

x : real

These properties hold the position of the path at progress.

y : real

These properties hold the position of the path at progress.