![]() |
Home · All Classes · All Functions · Overviews |
[Inherits Animation]
The PropertyAnimation element allows you to animate property changes. More...
Inherited by ColorAnimation, NumberAnimation, RotationAnimation, and Vector3dAnimation.
|
PropertyAnimation provides a way to animate changes to a property's value. It can be used in many different situations:
Animate any objects that have changed their x or y properties in the target state using an InOutQuad easing curve:
Transition { PropertyAnimation { properties: "x,y"; easing: "InOutQuad" } }
Animate all changes to a rectangle's x property.
Rectangle { x: Behavior { PropertyAnimation {} } }
Repeatedly animate the rectangle's x property.
Rectangle { x: SequentialAnimation { repeat: true PropertyAnimation { to: 50 } PropertyAnimation { to: 0 } } }
Fade out theObject when clicked:
MouseArea { anchors.fill: theObject onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 } }
Animate theObject's size property over 200ms, from its current size to 20-by-20:
PropertyAnimation { target: theObject; property: "size"; to: "20x20"; duration: 200 }
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 introduction.
duration : int |
This property holds the duration of the transition, in milliseconds.
The default value is 250.
easing : QEasingCurve |
Available values are:
Linear | Easing curve for a linear (t) function: velocity is constant. | ![]() |
InQuad | Easing curve for a quadratic (t^2) function: accelerating from zero velocity. | ![]() |
OutQuad | Easing curve for a quadratic (t^2) function: decelerating to zero velocity. | ![]() |
InOutQuad | Easing curve for a quadratic (t^2) function: acceleration until halfway, then deceleration. | ![]() |
OutInQuad | Easing curve for a quadratic (t^2) function: deceleration until halfway, then acceleration. | ![]() |
InCubic | Easing curve for a cubic (t^3) function: accelerating from zero velocity. | ![]() |
OutCubic | Easing curve for a cubic (t^3) function: decelerating from zero velocity. | ![]() |
InOutCubic | Easing curve for a cubic (t^3) function: acceleration until halfway, then deceleration. | ![]() |
OutInCubic | Easing curve for a cubic (t^3) function: deceleration until halfway, then acceleration. | ![]() |
InQuart | Easing curve for a quartic (t^4) function: accelerating from zero velocity. | ![]() |
OutQuart | Easing curve for a cubic (t^4) function: decelerating from zero velocity. | ![]() |
InOutQuart | Easing curve for a cubic (t^4) function: acceleration until halfway, then deceleration. | ![]() |
OutInQuart | Easing curve for a cubic (t^4) function: deceleration until halfway, then acceleration. | ![]() |
InQuint | Easing curve for a quintic (t^5) function: accelerating from zero velocity. | ![]() |
OutQuint | Easing curve for a cubic (t^5) function: decelerating from zero velocity. | ![]() |
InOutQuint | Easing curve for a cubic (t^5) function: acceleration until halfway, then deceleration. | ![]() |
OutInQuint | Easing curve for a cubic (t^5) function: deceleration until halfway, then acceleration. | ![]() |
InSine | Easing curve for a sinusoidal (sin(t)) function: accelerating from zero velocity. | ![]() |
OutSine | Easing curve for a sinusoidal (sin(t)) function: decelerating from zero velocity. | ![]() |
InOutSine | Easing curve for a sinusoidal (sin(t)) function: acceleration until halfway, then deceleration. | ![]() |
OutInSine | Easing curve for a sinusoidal (sin(t)) function: deceleration until halfway, then acceleration. | ![]() |
InExpo | Easing curve for an exponential (2^t) function: accelerating from zero velocity. | ![]() |
OutExpo | Easing curve for an exponential (2^t) function: decelerating from zero velocity. | ![]() |
InOutExpo | Easing curve for an exponential (2^t) function: acceleration until halfway, then deceleration. | ![]() |
OutInExpo | Easing curve for an exponential (2^t) function: deceleration until halfway, then acceleration. | ![]() |
InCirc | Easing curve for a circular (sqrt(1-t^2)) function: accelerating from zero velocity. | ![]() |
OutCirc | Easing curve for a circular (sqrt(1-t^2)) function: decelerating from zero velocity. | ![]() |
InOutCirc | Easing curve for a circular (sqrt(1-t^2)) function: acceleration until halfway, then deceleration. | ![]() |
OutInCirc | Easing curve for a circular (sqrt(1-t^2)) function: deceleration until halfway, then acceleration. | ![]() |
InElastic | Easing 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. | ![]() |
OutElastic | Easing 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. | ![]() |
InOutElastic | Easing curve for an elastic (exponentially decaying sine wave) function: acceleration until halfway, then deceleration. | ![]() |
OutInElastic | Easing curve for an elastic (exponentially decaying sine wave) function: deceleration until halfway, then acceleration. | ![]() |
InBack | Easing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing in: accelerating from zero velocity. | ![]() |
OutBack | Easing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing out: decelerating to zero velocity. | ![]() |
InOutBack | Easing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing in/out: acceleration until halfway, then deceleration. | ![]() |
OutInBack | Easing curve for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing out/in: deceleration until halfway, then acceleration. | ![]() |
InBounce | Easing curve for a bounce (exponentially decaying parabolic bounce) function: accelerating from zero velocity. | ![]() |
OutBounce | Easing curve for a bounce (exponentially decaying parabolic bounce) function: decelerating from zero velocity. | ![]() |
InOutBounce | Easing curve for a bounce (exponentially decaying parabolic bounce) function easing in/out: acceleration until halfway, then deceleration. | ![]() |
OutInBounce | Easing curve for a bounce (exponentially decaying parabolic bounce) function easing out/in: deceleration until halfway, then acceleration. | ![]() |
exclude : list<Object> |
This property holds the items not to be affected by this animation.
See also targets.
from : real |
This property holds the starting value. If not set, then the value defined in the start state of the transition.
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.
In many cases these properties do not need to be explicitly specified -- they can be inferred from the animation framework.
Value Source / Behavior | When 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) x: NumberAnimation { to: 500; repeat: true } //animate theRect's x property y: Behavior { NumberAnimation {} } //animate theRect's y property } |
Transition | When 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" } } } |
Standalone | When 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.
to : real |
This property holds the ending value. If not set, then the value defined in the end state of the transition or Behavior.
Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) | Trademarks | Qt 4.7.0 |