Types of Animations 主要有以下几种动画：
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
100; height: 100
color: Qt.rgba(0,0,1)
//Animations as Property Value Sources
NumberAnimation on x { to: 500; loops: Animation.Infinite } //animate theRect's x property
//Behavioral Animations
Behavior on y { 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
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
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()
}
}
Animations in a Signal Handler：其实也是standalone的一种，需要指定target和property
An animation can be created within a signal handler to be triggered when the signal is received. For example:
import Qt 4.7
Rectangle {
id: rect
100; height: 100
color: "red"
MouseArea {
anchors.fill: parent
onClicked: PropertyAnimation { target: rect; properties: "x,y"; to: 50; duration: 1000 }
}
}
Animation Elements: 动画元素：
Property Animation Elements
PropertyAnimation，It is inherited by NumberAnimation, ColorAnimation, RotationAnimation and Vector3dAnimation
Grouping Animations
ParallelAnimation or SequentialAnimation.
Other Animation Elements
In addition, QML provides several other elements useful for animation:
PauseAnimation: enables pauses during animations
ScriptAction: allows JavaScript to be executed during an animation, and can be used together with StateChangeScript to reused existing scripts
PropertyAction: changes a property immediately during an animation, without animating the property change
See their respective documentation pages for more details.