QML中，可以在物件的屬性值上應用動畫物件來隨著時間逐漸改變它們從而建立動畫。動畫物件可以從一組內建的動畫元素進行建立，可以用來為多種型別的屬性值產生動畫。動畫還可以通過不同的方式進行運用，這依賴於它們所需要的背景。（QML AniMation關鍵字）

1. 動畫型別

    一個動畫建立的方式取決於它所需要的背景

    動畫的語義的不同依賴於是否要建立以下幾點：

    a. Rectangle一旦建立該動畫就要將其移動到一個已知的位置

    b. 動畫只有在Rectangle被外部源移動時才會觸發，例如，當滑鼠點選時，產生動畫移動到滑鼠位置

    c. 只有在接受到一個特定的訊號偶才觸發該動畫

    d. 作為一個獨立的動畫，雖然沒有繫結Rectangle的運動，但是可以從指令碼中進行開啟和停止

    e. 只有在狀態改變時才會觸發該動畫。為了支援這些不同型別的動畫方式，QML提供了多種方式來定義一個動畫。

     f. 使用行為動畫，當一個屬性改變值時觸發

     g. 在一個訊號處理器中建立，當接收到一個訊號時觸發

     h. 作為一個獨立動畫，可以在指令碼中進行開始/停止，也可以重新繫結到不同的物件

     i. 使用切換，在不同狀態間提供動畫

2. 動畫作為屬性值的來源

     一個動畫被應用為屬性值源（property value source），要使用“動畫on屬性”語法。

import QtQuick 2.4

Rectangle {
    width: 100; height: 100
    color: "red"
    //啟動後開始動畫
    PropertyAnimation on x {to: 50; duration: 1000; loops: Animation.Infinite}
    PropertyAnimation on y {to: 50; duration: 1000; loops: Animation.Infinite}
}

3. 行為動畫

    一個特定的屬性值改變時要應用一個動畫，可以使用一個Behavior為一個屬性改變指定一個預設的動畫

import QtQuick 2.4

Item {
    width: 100; height: 100
    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"

        //設定移動動畫，時間為0.5秒
        Behavior on x {PropertyAnimation {duration: 500} }
        Behavior on y {PropertyAnimation {duration: 500} }
    }
    //到達滑鼠點選的位置
    MouseArea {
        anchors.fill: parent
        onClicked: {rect.x = mouse.x; rect.y = mouse.y}
    }
}

   有些情況下還可以通過enabled屬性來停用Behavior。注意這裡的PropertyAnimation的from和to屬性是不需要定義的，因為這些值已經提供了，分別是Rectangle的當前值和onClicked處理器中設定的新值。

4. 在訊號處理器中的動畫

    可以在訊號處理器中建立一個動畫，並在接搜到訊號時觸發

import QtQuick 2.4

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent
        //點選事件觸發動畫事件
        onClicked: PropertyAnimation{target: rect; properties: "x, y"; to: 50; duration: 500}
    }
}

    因為動畫沒有繫結到一個特定的物件或者屬性，所以必須指定target和property（或者targets和properties）屬性的值。而且還需要使用to屬性來指定新的x和y的值。

5. 獨立動畫

    動畫也可以像一個普通的QML物件一樣進行建立，而不需要繫結到任何特定的物件和屬性。

import QtQuick 2.4

//獨立動畫
Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"
    //獨立定義的電話
    PropertyAnimation {
        id: animation
        target: rect
        properties: "x,y"
        duration: 1000
    }
    //點選呼叫動畫
    MouseArea {
        anchors.fill: parent
        onClicked: {
            animation.to = 50
            animation.running = true
        }
    }
}

    一個獨立的動畫物件預設是沒有執行的，必須使用running屬性或者start()和stop()函式來明確地執行它。因為動畫沒有繫結到一個特殊得物件或屬性上，所以必須定義target和property（或者targets和properties）屬性的值。也需要用to屬性來指定新的x和y值。杜利軍動畫在不是一對一物件屬性進行動畫而且動畫需要明確開始和停止的情況下是非常有用的。

6. 切換

   切換用來設定當前狀態改變時的動畫，需要建立一個切換，需要定義一個Transition物件，然後將其新增到專案的transition屬性

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: rect.state = "moved"
    }
    states: State {
        name: "moved"
        //定義了當Rectangle在該狀態時其位置應該改變為（50，50）
        PropertyChanges {target: rect; x: 50; y: 50}
    }

    transitions: Transition {
        PropertyAnimation { properties: "x, y"; duration: 1000}
    }
}

   當Rectangle改變到moved狀態是，Transition將被觸發，切換的PropertyAnimation將會使用動畫將x和y屬性改變到它們的新值。這裡沒有為PropertyAnimation設定任何from和to屬性的值，在狀態改變的開始之前和結束之後會自動設定這些屬性x和y的值。另外，PropertyAnimation並不需要指定target物件，這樣任何物件的x和y值在狀態改變時進行更改都會使用動畫。不過，可以指定一個target來為特定的物件使用動畫。在Transition中的頂級動畫會並行執行，想要一個個的執行，可以使用SequentialAnimation，這個在後面的內容中講到。

7. 動畫元素

    所有的動畫都繼承自Animation元素，儘管無法直接建立Animation物件，不過它為動畫元素提供了必要的屬性和函式。

    它允許使用running屬性和start()和stop()函式來控制動畫的開始和停止，也可以通過loops屬性定義動畫的迴圈次數

8. 屬性動畫元素

    PropertyAnimation是用來為屬性提供動畫的最基本的動畫元素，可以用來為real、int、color、rect、point、size和vector3d等屬性設定動畫，被NumberAnimation、colorAnimation、RotationAnimation和Vector3dAnimation等元素繼承。NumberAnimation對real和int屬性提供了更高效的實現；Vector3dAnimation對vector3d屬性提供了更高效的支援；而ColorAnimation和RotationAnimation分別對color和rotation屬性變化動畫提供了特定的屬性支援。

    ColorAnimation允許顏色值設定from和to屬性。

import QtQuick 2.4

Rectangle {
    id: rect
    width: 100; height: 100
    //顏色漸變，執行時執行
    ColorAnimation on color {from:"red"; to: "yellow"; duration: 1000}
}

    RotationAnimation允許設定旋轉的方向。

import QtQuick 2.4

Item {
    width: 300; height: 300

    Rectangle {
        width: 100; height: 100; anchors.centerIn: parent
        color: "red"
        //啟動執行，順時針旋轉90度
        RotationAnimation on rotation {to: 90; direction: RotationAnimation.Clockwise}
    }
}

   另外，下面還有幾種專門的動畫元素可以使用：

    a. SmoothedAnimation: 它是一個專門的NumberAnimation，當目標值改變時在動畫中為其提供了一個平滑的變化；

    b. SpringAnimation: 提供了一個像彈簧一樣的動畫，可以設定mass、damping和epsilon等屬性

    c. ParentAnimation: 用來在改變父專案時產生動畫（對應ParentChange元素）

    d. AchorAnimation: 用來在改變錨時產生動畫（對應AnchorChanges元素）

    對於任何基於PropertyAnimation的動畫都可以通過設定easing屬性來控制在屬性值動畫中使用的緩和曲線。它們可以影響這些屬性值的動畫效果，提供一些如反彈、加速和減速等視覺效果。OutBounce來建立一個動畫到達目標值時的反彈效果。

import QtQuick 2.4

Rectangle {
    width: 100; height: 100
    color: "red"
    //反彈效果
    PropertyAnimation on x {to: 50; duration: 1000; easing.type: Easing.OutBounce}
    PropertyAnimation on y {to: 50; duration: 1000; easing.type: Easing.OutBounce}
}

9. 組合動畫

    多個動畫可以組合成一個單一的動畫，這可以使用ParalleAnimation或者SequentialAnimation動畫組元素中的一個實現。在ParaleAnimation中的動畫會同時進行，而在SequentialAnimation中的動畫會一個個地執行。想要執行多個動畫，可以在一個動畫組中定義。

import QtQuick 2.4

Rectangle {//SequentialAnimation作為屬性值源動畫應用在了image的y屬性上，所以動畫會在圖片載入完成後立即執行
    id: rect
    width: 120; height: 200
    color: "skyblue"

    Image {
        id: img
        width: 30; height: 25
        source: "1.jpg"
        anchors.horizontalCenter: parent.horizontalCenter
        y: 0

        SequentialAnimation on y {
            loops: Animation.Infinite
            NumberAnimation {to: rect.height - img.height; easing.type: Easing.OutBounce; duration: 2000}
            PauseAnimation { duration: 1000}
            NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000}
        }
    }
}

    因為SequentialAnimation是應用在y屬性上的，所以在組中的獨立的動畫也會自動應用在y屬性上。動畫組還可以巢狀。

import QtQuick 2.4
//使用了順序和並行動畫
Rectangle {
    id: rect
    width: 120; height: 200
    color: "skyblue"

    MouseArea {id: mouseArea; anchors.fill: parent}

    states: State {//點選時候，y軸改變，寬度改變
        name: "pressed"; when: mouseArea.pressed
        PropertyChanges { target: rect; color: "blue"; y: mouseArea.mouseY;
            width: mouseArea.mouseX;}
    }

    transitions: Transition {
        SequentialAnimation {
            //顏色改變時間
            ColorAnimation { duration: 200 }
            PauseAnimation { duration: 200 }

            ParallelAnimation {
                NumberAnimation {
                    duration: 500
                    easing.type: Easing.OutBounce
                    targets: rect
                    properties: "y"
                }

                NumberAnimation {
                    duration: 800
                    easing.type: Easing.InOutQuad
                    targets: redRect
                    properties: "width"
                }
            }
        }
    }
}

    一旦獨立動畫被放入SequentialAnimation或者ParallelAnimation，那麼它們就不能再獨立開啟或者停止。順序或者並行動畫必須作為一個組進行開啟和停止。

10. 其他動畫元素

    QML還為動畫提供了其他一些有用的元素

    a. PauseAnimation： 在動畫中間進行暫停

    b. ScriptAnimation: 允許在動畫中執行JavaScript，也可以和StateChangeScript一起使用來重用已經存在的指令碼