25.Qt Quick QML-Animation、PropertyAnimation、NumberAnimation、ColorAnimation

全部的動畫組件都是繼承於Animation,因此咱們先來介紹下它們的父組件Animation.

1.Animation
須要注意的是若是直接使用Animation將致使錯誤。它的存在只是爲了給子組件提供一組公共屬性和方法，這些屬性和方法可在繼承自它的全部其餘動畫類型中使用。
Properties

• alwaysRunToEnd : bool,始終運行到終點,默認爲false,若是爲true,那麼咱們就算在啓動動畫途中調用stop(),也無法中止,必須到了終點才中止
• loops : int,循環次數,默認值爲1,表示啓動動畫後,動畫只會運行1次,若是咱們設置爲3,那麼就是運行3次,若是設置爲Animation.Infinite,那麼就是無限次
• paused : bool,設置動畫是否暫停。
• running : bool ,設置動畫是否運行

Signals

• finished(): 當動畫天然完成時，將發出此信號。當running設置爲false時，它不會發出，對於loops = Animation.Infinite時也不會發出。
• started() : 當動畫開始時發出此信號。
• stopped() : 動畫中止時發出此信號(無論是用戶調用了stop() ,仍是動畫天然完成),若是alwaysRunToEnd = true,那麼不會發出該信號

Methods

• start() : 若是動畫已經在運行，則調用此方法無效(好比暫停後,調用start()是沒反應的,由於running此時仍是爲true)。在調用start()後，running屬性將爲true。
• stop() : 若是動畫未運行，則調用此方法無效。在調用stop()後，running屬性和paused屬性都將設置爲false。
• restart() : 從新啓動函數，至關於調用stop()，而後調用start()。
• complete() : 完成函數,當調用該函數後,若是動畫正在running中,當前屬性值會直接跳轉到目的屬性值,而後並將running置爲false,對於loops >= 1時,該函數將會無效.
• pause() : 暫停函數,當調用該函數後,會暫停動畫,並將paused屬性置爲true
• resume() :恢復暫停函數,若是動畫未暫停或未運行,則調用此方法無效。在調用resume()後，paused屬性將爲false。

測試alwaysRunToEnd屬性
因爲Animation是虛組件,不能直接使用,因此咱們以它的子組件PropertyAnimation爲例:

　　Column {
            Button {
                text: "啓動動畫"
                onClicked: {
                    animation.start()
                }
            }

            Button {
                text: "中止動畫"
                onClicked: {
                    animation.stop()
                }
            }

            Rectangle {
                 id: rect
                 width: 20
                 height: 20
                 color: "#000000"
                 PropertyAnimation {
                     id:animation;
                     loops: Animation.Infinite
                     alwaysRunToEnd: true
                     target: rect
                     property: "x"
                     from: 0;
                     to: 100;
                     duration: 500
                 }
             }
        }

當咱們啓動動畫後,點擊中止動畫按鈕時,此時必須到了終點才中止.

2.PropertyAnimation - 改變property屬性時能夠產生的動畫
PropertiesAniation用來給target目標下的property屬性更改分配一個動畫的組件.它的父組件是Animation
Properties

• duration : int,設置動畫持續時間,以ms爲單位,默認值爲250
• easing.type : enumeration,設置動畫的緩和曲線.默認值爲Easing.Linear(線性過程),好比咱們設置爲Easing.InQuad時,動畫效果就是從慢到快的過程.
• easing.amplitude : real,設置緩和曲線的振幅,默認值爲1.0,值越大振幅越大,僅當easing.type爲Easing.InBounce, Easing.OutBounce, Easing.InOutBounce, Easing.OutInBounce, Easing.InElastic, Easing.OutElastic, 　　Easing.InOutElastic or Easing.OutInElastic才生效
• from : variant,設置動畫的起始值,能夠爲任意類型的值
• to : variant ,設置動畫的終點值,能夠爲任意類型的值
• target : Object,設置目標對象
• targets : list<Object>,設置多個目標對象,好比targets: [rect1,rect2]
• exclude : list<Object>,設置不產生動畫的對象
• property : string,設置要分配動畫的目標對象下的哪一個屬性,好比property: "x"
• properties : string,設置要分配動畫目標對象下的多個屬性,好比properties: "x,y",分配了x和y屬性

示例以下所示:

    Column {
        Button {
            text: "啓動動畫"
            onClicked: {
                animation.start()
            }
        }

        Button {
            text: "中止動畫"
            onClicked: {
                animation.stop()
            }
        }

        Rectangle {
             id: rect1
             width: 20
             height: 20
             color: "#0000FF"
         }
        Rectangle {
             id: rect2
             width: 20
             height: 20
             color: "#FF0000"
         }
    }

    PropertyAnimation {
        id:animation;
        loops: Animation.Infinite
        alwaysRunToEnd: true
        targets: [rect1,rect2]
        property: "x"
        easing.type: Easing.InQuad
        from: 0;
        to: 100;
        duration: 2000
    } 

當咱們點擊啓動按鈕後,就會啓動rect1和rect2的x屬性從座標0到100進行移動的動畫.

假如一個動畫只針對一個目標對象的一個屬性,那麼咱們可使用 XXXAnimation on Property { ... }寫法,這樣就不須要指定target和property了,更加便捷:

　　Column {
        Button {
            text: "啓動動畫"
            onClicked: {
                animation.start()
            }
        }

        Button {
            text: "中止動畫"
            onClicked: {
                animation.stop()
            }
        }

        Rectangle {
             id: rect1
             width: 20
             height: 20
             color: "#00FF00"

             PropertyAnimation on x {
                 id:animation;
                 loops: Animation.Infinite
                 alwaysRunToEnd: true
                 easing.type: Easing.InQuad
                 running: false
                 from: 0;
                 to: 100;
                 duration: 2000
             }
         }
    }

須要注意的是該寫法的running是默認爲true,因此若是不想當即啓動動畫,則須要初始化爲false.

NumberAnimation和ColorAnimation
它們都是繼承於PropertyAnimation組件,而後重寫了from和to屬性,使用方法其實和PropertyAnimation同樣.
示例以下所示:

　　MouseArea {
        id: area
        anchors.fill: parent
        onPressed: {
            colorAnimation.to = Qt.rgba(Math.random(),Math.random(),Math.random(),1) // 從新賦一個顏色
            numberAnimation.restart()
        }
    }

    Rectangle {
        id: rect
        anchors.centerIn: parent
        color: "#00FF00"
        width: 20
        height: 20

        NumberAnimation on width{
            id: numberAnimation
            duration: 300
            to: rect.width*1.3
            running: false
        }
        ColorAnimation on color{
            id: colorAnimation
            duration: 300
            to: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
            running: numberAnimation.running
        }
    }

當咱們點擊一次,Rectangle的寬度將會變寬一次,而且顏色也會跟着改變.