We bake cookies in your browser for a better experience. Using this site means that you consent.Read More
We bake cookies in your browser for a better experience. Using this site means that you consent.Read More
ThePropertyAnimation element animates changes in property values.More...
| Since: | Qt 4.7 |
| Inherits: | |
| Inherited By: | ColorAnimation,NumberAnimation,RotationAnimation, andVector3dAnimation |
PropertyAnimation provides a way to animate changes to a property's value.
It can be used to define animations in a number of ways:
For example, to animate any objects that have changed theirx ory properties as a result of a state change, using anInOutQuad easing curve:
Rectangle {id:rectwidth:100;height:100color:"red"states:State {name:"moved"PropertyChanges {target:rect;x:50 } }transitions:Transition {PropertyAnimation {properties:"x,y";easing.type:Easing.InOutQuad } }}
For example, to animate all changes to a rectangle'sx property:
Rectangle {width:100;height:100color:"red" Behavior onx {PropertyAnimation {} }MouseArea {anchors.fill:parent;onClicked:parent.x=50 }}
For example, to repeatedly animate the rectangle'sx property:
Rectangle {width:100;height:100color:"red" SequentialAnimation onx {loops:Animation.InfinitePropertyAnimation {to:50 }PropertyAnimation {to:0 } }}
For example, to fade outtheObject when clicked:
MouseArea {anchors.fill:theObjectonClicked:PropertyAnimation {target:theObject;property:"opacity";to:0 }}
For example, to animaterect'swidth property over 500ms, from its current width to 30:
Rectangle {id:theRectwidth:100;height:100color:"red"// this is a standalone animation, it's not running by defaultPropertyAnimation {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 theQML Animation and Transitions introduction.
Note thatPropertyAnimation inherits the abstractAnimation element. This includes additional properties and methods for controlling the animation.
See alsoQML Animation and Transitions and Animation basics example.
This property holds the duration of the animation, in milliseconds.
The default value is 250.
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 isEasing.Linear.
PropertyAnimation {properties:"y";easing.type:Easing.InOutElastic;easing.amplitude:2.0;easing.period:1.5 }
Available types are:
Easing.Linear | Easing curve for a linear (t) function: velocity is constant. |  |
Easing.InQuad | Easing curve for a quadratic (t^2) function: accelerating from zero velocity. |  |
Easing.OutQuad | Easing curve for a quadratic (t^2) function: decelerating to zero velocity. |  |
Easing.InOutQuad | Easing curve for a quadratic (t^2) function: acceleration until halfway, then deceleration. |  |
Easing.OutInQuad | Easing curve for a quadratic (t^2) function: deceleration until halfway, then acceleration. |  |
Easing.InCubic | Easing curve for a cubic (t^3) function: accelerating from zero velocity. |  |
Easing.OutCubic | Easing curve for a cubic (t^3) function: decelerating from zero velocity. |  |
Easing.InOutCubic | Easing curve for a cubic (t^3) function: acceleration until halfway, then deceleration. |  |
Easing.OutInCubic | Easing curve for a cubic (t^3) function: deceleration until halfway, then acceleration. |  |
Easing.InQuart | Easing curve for a quartic (t^4) function: accelerating from zero velocity. |  |
Easing.OutQuart | Easing curve for a quartic (t^4) function: decelerating from zero velocity. |  |
Easing.InOutQuart | Easing curve for a quartic (t^4) function: acceleration until halfway, then deceleration. |  |
Easing.OutInQuart | Easing curve for a quartic (t^4) function: deceleration until halfway, then acceleration. |  |
Easing.InQuint | Easing curve for a quintic (t^5) function: accelerating from zero velocity. |  |
Easing.OutQuint | Easing curve for a quintic (t^5) function: decelerating from zero velocity. |  |
Easing.InOutQuint | Easing curve for a quintic (t^5) function: acceleration until halfway, then deceleration. |  |
Easing.OutInQuint | Easing curve for a quintic (t^5) function: deceleration until halfway, then acceleration. |  |
Easing.InSine | Easing curve for a sinusoidal (sin(t)) function: accelerating from zero velocity. |  |
Easing.OutSine | Easing curve for a sinusoidal (sin(t)) function: decelerating from zero velocity. |  |
Easing.InOutSine | Easing curve for a sinusoidal (sin(t)) function: acceleration until halfway, then deceleration. |  |
Easing.OutInSine | Easing curve for a sinusoidal (sin(t)) function: deceleration until halfway, then acceleration. |  |
Easing.InExpo | Easing curve for an exponential (2^t) function: accelerating from zero velocity. |  |
Easing.OutExpo | Easing curve for an exponential (2^t) function: decelerating from zero velocity. |  |
Easing.InOutExpo | Easing curve for an exponential (2^t) function: acceleration until halfway, then deceleration. |  |
Easing.OutInExpo | Easing curve for an exponential (2^t) function: deceleration until halfway, then acceleration. |  |
Easing.InCirc | Easing curve for a circular (sqrt(1-t^2)) function: accelerating from zero velocity. |  |
Easing.OutCirc | Easing curve for a circular (sqrt(1-t^2)) function: decelerating from zero velocity. |  |
Easing.InOutCirc | Easing curve for a circular (sqrt(1-t^2)) function: acceleration until halfway, then deceleration. |  |
Easing.OutInCirc | Easing curve for a circular (sqrt(1-t^2)) function: deceleration until halfway, then acceleration. |  |
Easing.InElastic | Easing curve for an elastic (exponentially decaying sine wave) function: accelerating from zero velocity. The peak amplitude can be set with theamplitude parameter, and the period of decay by theperiod parameter. |  |
Easing.OutElastic | Easing curve for an elastic (exponentially decaying sine wave) function: decelerating from zero velocity. The peak amplitude can be set with theamplitude parameter, and the period of decay by theperiod parameter. |  |
Easing.InOutElastic | Easing curve for an elastic (exponentially decaying sine wave) function: acceleration until halfway, then deceleration. |  |
Easing.OutInElastic | Easing curve for an elastic (exponentially decaying sine wave) function: deceleration until halfway, then acceleration. |  |
Easing.InBack | Easing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing in: accelerating from zero velocity. |  |
Easing.OutBack | Easing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing out: decelerating to zero velocity. |  |
Easing.InOutBack | Easing curve for a back (overshooting cubic function: (s+1)*t^3 - s*t^2) easing in/out: acceleration until halfway, then deceleration. |  |
Easing.OutInBack | Easing curve for a back (overshooting cubic easing: (s+1)*t^3 - s*t^2) easing out/in: deceleration until halfway, then acceleration. |  |
Easing.InBounce | Easing curve for a bounce (exponentially decaying parabolic bounce) function: accelerating from zero velocity. |  |
Easing.OutBounce | Easing curve for a bounce (exponentially decaying parabolic bounce) function: decelerating from zero velocity. |  |
Easing.InOutBounce | Easing curve for a bounce (exponentially decaying parabolic bounce) function easing in/out: acceleration until halfway, then deceleration. |  |
Easing.OutInBounce | Easing curve for a bounce (exponentially decaying parabolic bounce) function easing out/in: deceleration until halfway, then acceleration. |  |
easing.amplitude is only applicable for bounce and elastic curves (curves of typeEasing.InBounce,Easing.OutBounce,Easing.InOutBounce,Easing.OutInBounce,Easing.InElastic,Easing.OutElastic,Easing.InOutElastic orEasing.OutInElastic).
easing.overshoot is only applicable ifeasing.type is:Easing.InBack,Easing.OutBack,Easing.InOutBack orEasing.OutInBack.
easing.period is only applicable if easing.type is:Easing.InElastic,Easing.OutElastic,Easing.InOutElastic orEasing.OutInElastic.
See theeasing example for a demonstration of the different easing settings.
This property holds the items not to be affected by this animation.
See alsoPropertyAnimation::targets.
This property holds the starting value for the animation.
If thePropertyAnimation is defined within aTransition orBehavior, this value defaults to the value defined in the starting state of theTransition, or the current value of the property at the moment theBehavior is triggered.
See alsoQML Animation and Transitions.
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.
Thetargets property allows multiple targets to be set. For example, this animates thex property of bothitemA anditemB:
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 / 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:theRectwidth:100;height:100color:Qt.rgba(0,0,1) NumberAnimation onx {to:500;loops:Animation.Infinite }//animate theRect's x property Behavior ony {NumberAnimation {} }//animate theRect's y property } |
| Transition | When used in a transition, a property animation is assumed to matchall targets butno properties. In practice, that means you need to specify at least the properties in order for the animation to do anything.Rectangle {id:theRectwidth:100;height:100color: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 valuesNumberAnimation {properties:"x,y" }//animate theRect's z to its final valueNumberAnimation {target:theRect;property:"z" } } } |
| Standalone | When an animation is used standalone, both the target and property need to be explicitly specified.Rectangle {id:theRectwidth:100;height:100color:Qt.rgba(0,0,1)//need to explicitly specify target and propertyNumberAnimation {id:theAnim;target:theRect;property:"x";to:500 }MouseArea {anchors.fill:parentonClicked:theAnim.start() } } |
As seen in the above example, properties is specified as a comma-separated string of property names to animate.
See alsoexclude andQML Animation and Transitions.
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.
Thetargets property allows multiple targets to be set. For example, this animates thex property of bothitemA anditemB:
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 / 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:theRectwidth:100;height:100color:Qt.rgba(0,0,1) NumberAnimation onx {to:500;loops:Animation.Infinite }//animate theRect's x property Behavior ony {NumberAnimation {} }//animate theRect's y property } |
| Transition | When used in a transition, a property animation is assumed to matchall targets butno properties. In practice, that means you need to specify at least the properties in order for the animation to do anything.Rectangle {id:theRectwidth:100;height:100color: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 valuesNumberAnimation {properties:"x,y" }//animate theRect's z to its final valueNumberAnimation {target:theRect;property:"z" } } } |
| Standalone | When an animation is used standalone, both the target and property need to be explicitly specified.Rectangle {id:theRectwidth:100;height:100color:Qt.rgba(0,0,1)//need to explicitly specify target and propertyNumberAnimation {id:theAnim;target:theRect;property:"x";to:500 }MouseArea {anchors.fill:parentonClicked:theAnim.start() } } |
As seen in the above example, properties is specified as a comma-separated string of property names to animate.
See alsoexclude andQML Animation and Transitions.
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.
Thetargets property allows multiple targets to be set. For example, this animates thex property of bothitemA anditemB:
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 / 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:theRectwidth:100;height:100color:Qt.rgba(0,0,1) NumberAnimation onx {to:500;loops:Animation.Infinite }//animate theRect's x property Behavior ony {NumberAnimation {} }//animate theRect's y property } |
| Transition | When used in a transition, a property animation is assumed to matchall targets butno properties. In practice, that means you need to specify at least the properties in order for the animation to do anything.Rectangle {id:theRectwidth:100;height:100color: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 valuesNumberAnimation {properties:"x,y" }//animate theRect's z to its final valueNumberAnimation {target:theRect;property:"z" } } } |
| Standalone | When an animation is used standalone, both the target and property need to be explicitly specified.Rectangle {id:theRectwidth:100;height:100color:Qt.rgba(0,0,1)//need to explicitly specify target and propertyNumberAnimation {id:theAnim;target:theRect;property:"x";to:500 }MouseArea {anchors.fill:parentonClicked:theAnim.start() } } |
As seen in the above example, properties is specified as a comma-separated string of property names to animate.
See alsoexclude andQML Animation and Transitions.
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.
Thetargets property allows multiple targets to be set. For example, this animates thex property of bothitemA anditemB:
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 / 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:theRectwidth:100;height:100color:Qt.rgba(0,0,1) NumberAnimation onx {to:500;loops:Animation.Infinite }//animate theRect's x property Behavior ony {NumberAnimation {} }//animate theRect's y property } |
| Transition | When used in a transition, a property animation is assumed to matchall targets butno properties. In practice, that means you need to specify at least the properties in order for the animation to do anything.Rectangle {id:theRectwidth:100;height:100color: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 valuesNumberAnimation {properties:"x,y" }//animate theRect's z to its final valueNumberAnimation {target:theRect;property:"z" } } } |
| Standalone | When an animation is used standalone, both the target and property need to be explicitly specified.Rectangle {id:theRectwidth:100;height:100color:Qt.rgba(0,0,1)//need to explicitly specify target and propertyNumberAnimation {id:theAnim;target:theRect;property:"x";to:500 }MouseArea {anchors.fill:parentonClicked:theAnim.start() } } |
As seen in the above example, properties is specified as a comma-separated string of property names to animate.
See alsoexclude andQML Animation and Transitions.
This property holds the end value for the animation.
If thePropertyAnimation is defined within aTransition orBehavior, this value defaults to the value defined in the end state of theTransition, or the value of the property change that triggered theBehavior.
See alsoQML Animation and Transitions.
© 2016 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of theGNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.