easingCurve QML Value Type

Value that represents an easing curve. More...

Detailed Description

The easingCurve type is a value with attributes that define an easing curve:

• enumeration type
• real amplitude
• real overshoot
• real period
• list<real> bezierCurve

It is useful when doing custom animations with FrameAnimation, for example, or in any use case that requires easing a value along a given curve.

To create an easingCurve value, import QtQml (or QtQuick) into a namespace:

import QtQml as QtQml

Then, create an instance of it with new:

        readonly property easingCurve easingCurve: Easing.InQuart

The following example is similar to the one described by the documentation of Easing:

    Rectangle {
        id: rect
        width: 100
        height: 100
        anchors.centerIn: parent
        color: "red"
        opacity: 0
    }

    FrameAnimation {
        id: frameAnimation
        running: true

        property real elapsed // In seconds.
        readonly property real duration: 2 // Two seconds.
        readonly property easingCurve easingCurve: Easing.InQuart

        onTriggered: {
            elapsed += frameTime
            // Loop once we reach the duration.
            if (elapsed > duration)
                elapsed = 0

            // Increase the opacity from 0 slowly at first, then quickly.
            rect.opacity = inQuartCurve.valueForProgress(elapsed / duration)
        }
    }

It's also possible to create easingCurve via structured value type syntax:

    readonly property easingCurve inElasticCurve: ({
        type: Easing.InElastic,
        amplitude: 4,
        period: 3
    })

When integrating with C++, note that any QEasingCurve value passed into QML from C++ is automatically converted into an easingCurve value. When an easingCurve value is passed to C++, it is automatically converted into a QEasingCurve value.

A default-constructed easingCurve is equal to new QtQml.easingCurve(QtQml.Easing.Linear).

See also QML Value Types.