PropertyAnimation QML Type

The PropertyAnimation element animates changes in property values. More...

Import Statement: import .
Since: Qt 4.7
Inherits:

Animation

Inherited By:

ColorAnimation, NumberAnimation, RotationAnimation, and Vector3dAnimation.

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:

    
    
  • In a Behavior

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

    
    
  • As a property value source

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

    
    
  • In a signal handler

    For example, to fade out theObject when clicked:

    MouseArea {
        anchors.fill: theObject
        onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
    }
  • Standalone

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

    
    

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 QML Animation and Transitions introduction.

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

See also QML Animation and Transitions and Animation basics example.

Property Documentation

duration : int

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

The default value is 250.


easing group

easing.type : enumeration

easing.amplitude : real

easing.overshoot : real

easing.period : real

the easing curve used for the animation.

To specify an easing curve you need to specify at least the type. For some curves you can also specify amplitude, period and/or overshoot (more details provided after the table). The default easing curve is Easing.Linear.

PropertyAnimation { properties: "y"; easing.type: Easing.InOutElastic; easing.amplitude: 2.0; easing.period: 1.5 }

Available types are:

Easing.LinearEasing curve for a linear (t) function: velocity is constant.[Missing image qeasingcurve-linear.png]
Easing.InQuadEasing curve for a quadratic (t^2) function: accelerating from zero velocity.[Missing image qeasingcurve-inquad.png]
Easing.OutQuadEasing curve for a quadratic (t^2) function: decelerating to zero velocity.[Missing image qeasingcurve-outquad.png]
Easing.InOutQuadEasing curve for a quadratic (t^2) function: acceleration until halfway, then deceleration.[Missing image qeasingcurve-inoutquad.png]
Easing.OutInQuadEasing curve for a quadratic (t^2) function: deceleration until halfway, then acceleration.[Missing image qeasingcurve-outinquad.png]
Easing.InCubicEasing curve for a cubic (t^3) function: accelerating from zero velocity.[Missing image qeasingcurve-incubic.png]
Easing.OutCubicEasing curve for a cubic (t^3) function: decelerating from zero velocity.[Missing image qeasingcurve-outcubic.png]
Easing.InOutCubicEasing curve for a cubic (t^3) function: acceleration until halfway, then deceleration.[Missing image qeasingcurve-inoutcubic.png]
Easing.OutInCubicEasing curve for a cubic (t^3) function: deceleration until halfway, then acceleration.[Missing image qeasingcurve-outincubic.png]
Easing.InQuartEasing curve for a quartic (t^4) function: accelerating from zero velocity.[Missing image qeasingcurve-inquart.png]
Easing.OutQuartEasing curve for a quartic (t^4) function: decelerating from zero velocity.[Missing image qeasingcurve-outquart.png]
Easing.InOutQuartEasing curve for a quartic (t^4) function: acceleration until halfway, then deceleration.[Missing image qeasingcurve-inoutquart.png]
Easing.OutInQuartEasing curve for a quartic (t^4) function: deceleration until halfway, then acceleration.[Missing image qeasingcurve-outinquart.png]
Easing.InQuintEasing curve for a quintic (t^5) function: accelerating from zero velocity.[Missing image qeasingcurve-inquint.png]
Easing.OutQuintEasing curve for a quintic (t^5) function: decelerating from zero velocity.[Missing image qeasingcurve-outquint.png]
Easing.InOutQuintEasing curve for a quintic (t^5) function: acceleration until halfway, then deceleration.[Missing image qeasingcurve-inoutquint.png]
Easing.OutInQuintEasing curve for a quintic (t^5) function: deceleration until halfway, then acceleration.[Missing image qeasingcurve-outinquint.png]
Easing.InSineEasing curve for a sinusoidal (sin(t)) function: accelerating from zero velocity.[Missing image qeasingcurve-insine.png]
Easing.OutSineEasing curve for a sinusoidal (sin(t)) function: decelerating from zero velocity.[Missing image qeasingcurve-outsine.png]
Easing.InOutSineEasing curve for a sinusoidal (sin(t)) function: acceleration until halfway, then deceleration.[Missing image qeasingcurve-inoutsine.png]
Easing.OutInSineEasing curve for a sinusoidal (sin(t)) function: deceleration until halfway, then acceleration.[Missing image qeasingcurve-outinsine.png]
Easing.InExpoEasing curve for an exponential (2^t) function: accelerating from zero velocity.[Missing image qeasingcurve-inexpo.png]
Easing.OutExpoEasing curve for an exponential (2^t) function: decelerating from zero velocity.[Missing image qeasingcurve-outexpo.png]
Easing.InOutExpoEasing curve for an exponential (2^t) function: acceleration until halfway, then deceleration.[Missing image qeasingcurve-inoutexpo.png]
Easing.OutInExpoEasing curve for an exponential (2^t) function: deceleration until halfway, then acceleration.[Missing image qeasingcurve-outinexpo.png]
Easing.InCircEasing curve for a circular (sqrt(1-t^2)) function: accelerating from zero velocity.[Missing image qeasingcurve-incirc.png]
Easing.OutCircEasing curve for a circular (sqrt(1-t^2)) function: decelerating from zero velocity.[Missing image qeasingcurve-outcirc.png]
Easing.InOutCircEasing curve for a circular (sqrt(1-t^2)) function: acceleration until halfway, then deceleration.[Missing image qeasingcurve-inoutcirc.png]
Easing.OutInCircEasing curve for a circular (sqrt(1-t^2)) function: deceleration until halfway, then acceleration.[Missing image qeasingcurve-outincirc.png]
Easing.InElasticEasing curve for an elastic (exponentially decaying sine wave) function: accelerating from zero velocity.

The peak amplitude can be set with the amplitude parameter, and the period of decay by the period parameter.

[Missing image qeasingcurve-inelastic.png]
Easing.OutElasticEasing curve for an elastic (exponentially decaying sine wave) function: decelerating from zero velocity.

The peak amplitude can be set with the amplitude parameter, and the period of decay by the period parameter.

[Missing image qeasingcurve-outelastic.png]
Easing.InOutElasticEasing curve for an elastic (exponentially decaying sine wave) function: acceleration until halfway, then deceleration.[Missing image qeasingcurve-inoutelastic.png]
Easing.OutInElasticEasing curve for an elastic (exponentially decaying sine wave) function: deceleration until halfway, then acceleration.[Missing image qeasingcurve-outinelastic.png]
Easing.InBackEasing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing in: accelerating from zero velocity.[Missing image qeasingcurve-inback.png]
Easing.OutBackEasing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing out: decelerating to zero velocity.[Missing image qeasingcurve-outback.png]
Easing.InOutBackEasing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing in/out: acceleration until halfway, then deceleration.[Missing image qeasingcurve-inoutback.png]
Easing.OutInBackEasing curve for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing out/in: deceleration until halfway, then acceleration.[Missing image qeasingcurve-outinback.png]
Easing.InBounceEasing curve for a bounce (exponentially decaying parabolic bounce) function: accelerating from zero velocity.[Missing image qeasingcurve-inbounce.png]
Easing.OutBounceEasing curve for a bounce (exponentially decaying parabolic bounce) function: decelerating from zero velocity.[Missing image qeasingcurve-outbounce.png]
Easing.InOutBounceEasing curve for a bounce (exponentially decaying parabolic bounce) function easing in/out: acceleration until halfway, then deceleration.[Missing image qeasingcurve-inoutbounce.png]
Easing.OutInBounceEasing curve for a bounce (exponentially decaying parabolic bounce) function easing out/in: deceleration until halfway, then acceleration.[Missing image qeasingcurve-outinbounce.png]

easing.amplitude is only applicable for bounce and elastic curves (curves of type Easing.InBounce, Easing.OutBounce, Easing.InOutBounce, Easing.OutInBounce, Easing.InElastic, Easing.OutElastic, Easing.InOutElastic or Easing.OutInElastic).

easing.overshoot is only applicable if easing.type is: Easing.InBack, Easing.OutBack, Easing.InOutBack or Easing.OutInBack.

easing.period is only applicable if easing.type is: Easing.InElastic, Easing.OutElastic, Easing.InOutElastic or Easing.OutInElastic.

See the easing example for a demonstration of the different easing settings.


exclude : list<Object>

This property holds the items not to be affected by this animation.

See also PropertyAnimation::targets.


from : real

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 QML Animation and Transitions.


properties : string

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 }

The singular forms are slightly optimized, so if you do have only a single target/property to animate you should try to use them.

The targets property allows multiple targets to be set. For example, this animates the x property of both itemA and itemB:

NumberAnimation { targets: [itemA, itemB]; 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 { target: theRect; x: 200; y: 200; z: 4 }
           PropertyChanges { target: 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 exclude and QML Animation and Transitions.


property : string

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 }

The singular forms are slightly optimized, so if you do have only a single target/property to animate you should try to use them.

The targets property allows multiple targets to be set. For example, this animates the x property of both itemA and itemB:

NumberAnimation { targets: [itemA, itemB]; 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 { target: theRect; x: 200; y: 200; z: 4 }
           PropertyChanges { target: 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 exclude and QML Animation and Transitions.


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 }

The singular forms are slightly optimized, so if you do have only a single target/property to animate you should try to use them.

The targets property allows multiple targets to be set. For example, this animates the x property of both itemA and itemB:

NumberAnimation { targets: [itemA, itemB]; 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 { target: theRect; x: 200; y: 200; z: 4 }
           PropertyChanges { target: 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 exclude and QML Animation and Transitions.


targets : list<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 }

The singular forms are slightly optimized, so if you do have only a single target/property to animate you should try to use them.

The targets property allows multiple targets to be set. For example, this animates the x property of both itemA and itemB:

NumberAnimation { targets: [itemA, itemB]; 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 { target: theRect; x: 200; y: 200; z: 4 }
           PropertyChanges { target: 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 exclude and QML Animation and Transitions.


to : real

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 QML Animation and Transitions.