QML Animation

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
        width: 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
        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()
        }
    }

 

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
     width: 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.