Back to Doc.qt.io
Contact Us Blog Download Qt

C

Timeline QML Type

A timeline. More...

Import Statement: import QtQuick.Timeline
Since: Qt Quick Ultralite 1.3

Properties

Detailed Description

Specifies a timeline of frames between startFrame and endFrame. Its keyframes describe how the affected properties change when the currentFrame changes.

Timeline {
    startFrame: 0
    currentFrame: 50
    endFrame: 100
}

To add keyframes to the Timeline, add children of KeyframeGroup type. Each KeyframeGroup contains the Keyframes that describes how a specific property changes.

Timeline {
    // ...

    KeyframeGroup {
        target: myitem
        property: "x"
        Keyframe {
            frame: 20
            value: 50
        }
    }
}

A timeline can be either used for animations or to control the behavior of items. For example, it is possible to create a progress bar where the current frame reflects the progress by binding it to currentFrame. Alternatively, TimelineAnimations in the animations property can animate currentFrame directly.

The following example uses a Timeline to animate the width and height properties of a Rectangle:

Rectangle {
    color: "white"
    Rectangle {
        id: rect
        color: "red"
        width: 100
        height: 100
    }

    Timeline {
        startFrame: 0
        endFrame: 100

        KeyframeGroup {
            target: rect
            property: "width"
            Keyframe {
                frame: 50
                value: 150
            }
            Keyframe {
                frame: 100
                value: 25
                easing.type: Easing.InOutQuad
            }
        }

        KeyframeGroup {
            target: rect
            property: "height"
            Keyframe {
                frame: 0
                value: 50
            }
            Keyframe {
                frame: 70
                value: 150
            }
        }

        animations: [
            TimelineAnimation {
                running: true
                pingPong: true
                // ???
            }
        ]
    }
}

Note: Qt Quick Ultralite Timeline does not support the keyframes property.

See also KeyframeGroup and TimelineAnimation.

Property Documentation

animations : list

A list of animations attached to the timeline. The animations must be of type TimelineAnimation and automatically apply to the currentFrame property.


currentFrame : real

The current keyframe on the timeline. The current keyframe can be animated or a binding can be attached to it. Using bindings allows controlling the behavior of components.


enabled : bool

Whether the timeline is enabled.

When the timeline is disabled, all properties the timeline affects will have their regular values. When the timeline is enabled, the property values are determined by the current frame and the keyframes.

Only one timeline can be active on a property at a time.


endFrame : real

The end of the timeline. This value has no effect.


startFrame : real

The start of the timeline. Each KeyframeGroup has an implicit Keyframe at startFrame with the value the target property had when the Timeline was first enabled.


Available under certain Qt licenses.
Find out more.