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.