C

PropertyAnimation QML Type

Animates changes in property values. More...

Import Statement: import QtQuick
Since: Qt Quick Ultralite 1.0
Inherits:

Animation

Inherited By:

ColorAnimation, NumberAnimation, and RotationAnimation

Properties

Detailed Description

PropertyAnimation provides a way to animate changes to a property's value.

It can be used to define animations in a number of ways:

  • In a Transition

    For example, to animate any objects that have changed their x or y properties as a result of a state change, using an InOutQuad easing curve:

    Item {
        id: root
    
        Rectangle {
            id: rect
            width: 100; height: 100
            color: "red"
        }
    
        states: State {
            name: "moved"
            PropertyChanges { target: rect; x: 50 }
        }
    
        transitions: Transition {
            PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
        }
    }
  • In a Behavior

    For example, to animate all changes to a rectangle's x property:

    Rectangle {
        width: 100; height: 100
        color: "red"
    
        Behavior on x { PropertyAnimation {} }
    
        MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
    }
  • As a property value source

    For example, to repeatedly animate the rectangle's x property:

    Rectangle {
        width: 100; height: 100
        color: "red"
    
        SequentialAnimation on x {
            loops: Animation.Infinite
            PropertyAnimation { to: 50 }
            PropertyAnimation { to: 0 }
        }
    }
  • Standalone

    For example, to animate rect's width property over 500ms, from its current width to 30:

    Rectangle {
        id: theRect
        width: 100; height: 100
        color: "red"
    
        // this is a standalone animation, it's not running by default
        PropertyAnimation { id: animation;
                            target: theRect;
                            property: "width";
                            to: 30;
                            duration: 500 }
    
        MouseArea { anchors.fill: parent; onClicked: animation.running = true }
    }

Depending on how the animation is used, the set of properties normally used will be different. For more information see the individual property documentation, as well as the Animation and Transitions introduction.

Note that PropertyAnimation inherits the abstract Animation type. This includes additional properties and methods for controlling the animation.

See also Animation and Transitions.

Property Documentation

properties : string

property : string

target : Object

These properties are used as a set to determine which properties should be animated. The singular and plural forms are functionally identical, e.g.

NumberAnimation {
    target: theItem;
    property: "x";
    to: 500;
}

has the same meaning as

NumberAnimation {
    targets theItem;
    properties: "x";
    to: 500;
}

In many cases these properties do not need to be explicitly specified, as they can be inferred from the animation framework:

Value Source / BehaviorWhen an animation is used as a value source or in a Behavior, the default target and property name to be animated can both be inferred.
Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    NumberAnimation on x { to: 500; loops: Animation.Infinite } //animate theRect's x property
    Behavior on y { NumberAnimation {} } //animate theRect's y property
}
TransitionWhen used in a transition, a property animation is assumed to match all targets but no properties. In practice, that means you need to specify at least the properties in order for the animation to do anything.
Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    Item { id: uselessItem }
    states: State {
        name: "state1"
        PropertyChanges {
            theRect {
                x: 200
                y: 200
                z: 4
            }
        }
        PropertyChanges {
            uselessItem {
                x: 10
                y: 10
                z: 2
            }
        }
    }
    transitions: Transition {
        //animate both theRect's and uselessItem's x and y to their final values
        NumberAnimation { properties: "x,y" }

        //animate theRect's z to its final value
        NumberAnimation { target: theRect; property: "z" }
    }
}
StandaloneWhen an animation is used standalone, both the target and property need to be explicitly specified.
Rectangle {
    id: theRect
    width: 100; height: 100
    color: Qt.rgba(0,0,1)
    //need to explicitly specify target and property
    NumberAnimation { id: theAnim; target: theRect; property: "x"; to: 500 }
    MouseArea {
        anchors.fill: parent
        onClicked: theAnim.start()
    }
}

As seen in the above example, properties is specified as a comma-separated string of property names to animate.

See also Animation and Transitions.


duration : int

This property holds the duration of the animation, in milliseconds.

The default value is 250.


easing group

easing.bezierCurve : list<real>

easing.type : enumeration

Specifies the easing curve used for the animation

To specify an easing curve you need to specify at least the type. The default easing curve is Easing.Linear.

PropertyAnimation { properties: "y";
                    easing.type: Easing.InOutSine;
                  }

Available types are:

Easing.LinearEasing curve for a linear (t) function: velocity is constant.
Easing.InQuadEasing curve for a quadratic (t^2) function: accelerating from zero velocity.
Easing.OutQuadEasing curve for a quadratic (t^2) function: decelerating to zero velocity.
Easing.InOutQuadEasing curve for a quadratic (t^2) function: acceleration until halfway, then deceleration.
Easing.OutInQuadEasing curve for a quadratic (t^2) function: deceleration until halfway, then acceleration.
Easing.InCubicEasing curve for a cubic (t^3) function: accelerating from zero velocity.
Easing.OutCubicEasing curve for a cubic (t^3) function: decelerating to zero velocity.
Easing.InOutCubicEasing curve for a cubic (t^3) function: acceleration until halfway, then deceleration.
Easing.OutInCubicEasing curve for a cubic (t^3) function: deceleration until halfway, then acceleration.
Easing.InQuartEasing curve for a quartic (t^4) function: accelerating from zero velocity.
Easing.OutQuartEasing curve for a quartic (t^4) function: decelerating to zero velocity.
Easing.InOutQuartEasing curve for a quartic (t^4) function: acceleration until halfway, then deceleration.
Easing.OutInQuartEasing curve for a quartic (t^4) function: deceleration until halfway, then acceleration.
Easing.InQuintEasing curve for a quintic (t^5) function: accelerating from zero velocity.
Easing.OutQuintEasing curve for a quintic (t^5) function: decelerating to zero velocity.
Easing.InOutQuintEasing curve for a quintic (t^5) function: acceleration until halfway, then deceleration.
Easing.OutInQuintEasing curve for a quintic (t^5) function: deceleration until halfway, then acceleration.
Easing.InSineEasing curve for a sinusoidal (sin(t)) function: accelerating from zero velocity.
Easing.OutSineEasing curve for a sinusoidal (sin(t)) function: decelerating to zero velocity.
Easing.InOutSineEasing curve for a sinusoidal (sin(t)) function: acceleration until halfway, then deceleration.
Easing.OutInSineEasing curve for a sinusoidal (sin(t)) function: deceleration until halfway, then acceleration.
Easing.InExpoEasing curve for an exponential (2^t) function: accelerating from zero velocity.
Easing.OutExpoEasing curve for an exponential (2^t) function: decelerating to zero velocity.
Easing.InOutExpoEasing curve for an exponential (2^t) function: acceleration until halfway, then deceleration.
Easing.OutInExpoEasing curve for an exponential (2^t) function: deceleration until halfway, then acceleration.
Easing.InCircEasing curve for a circular (sqrt(1-t^2)) function: accelerating from zero velocity.
Easing.OutCircEasing curve for a circular (sqrt(1-t^2)) function: decelerating to zero velocity.
Easing.InOutCircEasing curve for a circular (sqrt(1-t^2)) function: acceleration until halfway, then deceleration.
Easing.OutInCircEasing curve for a circular (sqrt(1-t^2)) function: deceleration until halfway, then acceleration.
Easing.InElasticEasing curve for an elastic (exponentially decaying sine wave) function: accelerating from zero velocity. It uses the default values for the peak amplitude (1.0) and the period of decay (0.3).
Easing.OutElasticEasing curve for an elastic (exponentially decaying sine wave) function: decelerating to zero velocity. It uses the default values for the peak amplitude (1.0) and the period of decay (0.3).
Easing.InOutElasticEasing curve for an elastic (exponentially decaying sine wave) function: acceleration until halfway, then deceleration.
Easing.OutInElasticEasing curve for an elastic (exponentially decaying sine wave) function: deceleration until halfway, then acceleration.
Easing.InBackEasing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing in: accelerating from zero velocity. It uses the default value for the overshoot (s: 1.70158).
Easing.OutBackEasing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing out: decelerating to zero velocity. It uses the default value for the overshoot (s: 1.70158).
Easing.InOutBackEasing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing in/out: acceleration until halfway, then deceleration. It uses the default value for the overshoot (s: 1.70158).
Easing.OutInBackEasing curve for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing out/in: deceleration until halfway, then acceleration. It uses the default value for the overshoot (s: 1.70158).
Easing.InBounceEasing curve for a bounce (exponentially decaying parabolic bounce) function: accelerating from zero velocity.
Easing.OutBounceEasing curve for a bounce (exponentially decaying parabolic bounce) function: decelerating from zero velocity.
Easing.InOutBounceEasing curve for a bounce (exponentially decaying parabolic bounce) function easing in/out: acceleration until halfway, then deceleration.
Easing.OutInBounceEasing curve for a bounce (exponentially decaying parabolic bounce) function easing out/in: deceleration until halfway, then acceleration.
Easing.BezierSplineCustom easing curve defined by the easing.bezierCurve property.

easing.bezierCurve is only applicable if easing.type is: Easing.BezierSpline. This property is a list<real> containing groups of three points defining a curve from 0,0 to 1,1 - control1, control2, end point: [cx1, cy1, cx2, cy2, endx, endy, ...]. The last point must be 1,1.

Note: If you set easing.bezierCurve but easing.type is not specified, the qmltocpp tool will generates code that sets easing.type to Easing.BezierSpline implicitly.


from : variant

This property holds the starting value for the animation.

If the PropertyAnimation is defined within a Transition or Behavior, this value defaults to the value defined in the starting state of the Transition, or the current value of the property at the moment the Behavior is triggered.

See also Animation and Transitions.


to : variant

This property holds the end value for the animation.

If the PropertyAnimation is defined within a Transition or Behavior, this value defaults to the value defined in the end state of the Transition, or the value of the property change that triggered the Behavior.

See also Animation and Transitions.


Available under certain Qt licenses.
Find out more.