Qt_QML動畫（Animations）___一

動畫的解釋：
動畫被用於屬性的改變。
一個動畫定義了屬性值改變的曲線， 將一個屬性值變化從一個值過渡到另一個值。
動畫是由一連串的目標屬性活動定義的， 平緩的曲線算法能夠引發一個定義時間內屬性的持續變化。 所有在QtQuick中的動畫都由同一個計時器來控制， 因此它們始終都保持同步， 這也提高了動畫的性能和顯示效果。
動畫控制了屬性的改變， 每個元素都有大量的屬性供你任意使用。

Image {
	x: 40; y: 80
	source: "assets/rocket.png"
	
	// 動畫在X軸方向上，逐步移動至240位置，每一次持續4000ms，並永遠循環
	NumberAnimation on x {
		to: 240
		duration: 4000
		loops: Animation.Infinite
	}
	// 動畫旋轉，逐步旋轉至360°，每次持續4000ms，並永遠循環
	RotationAnimation on rotation {
		to: 360
		duration: 4000
		loops: Animation.Infinite
	}
}

動畫元素（Animation Elements）

基礎和通用的動畫元素：

• PropertyAnimation（屬性動畫） - 使用屬性值改變播放的動畫：easing.amplitude（緩衝振幅），easing.overshoot（緩衝溢出），easing.period（緩衝週期）
• NumberAnimation（數字動畫） - 使用數字改變播放的動畫
• ColorAnimation（顏色動畫） - 使用顏色改變播放的動畫
• RotationAnimation（旋轉動畫） - 使用旋轉改變播放的動畫

特殊場景使用動畫：

• PauseAnimation（停止動畫） - 運行暫停一個動畫
• SequentialAnimation（順序動畫） - 允許動畫有序播放
• ParallelAnimation（並行動畫） - 允許動畫同時播放
• AnchorAnimation（錨定動畫） - 使用錨定改變播放的動畫
• ParentAnimation（父元素動畫） - 使用父對象改變播放的動畫
• SmotthedAnimation（平滑動畫） - 跟蹤一個平滑值播放的動畫
• SpringAnimation（彈簧動畫） - 跟蹤一個彈簧變換的值播放的動畫
• PathAnimation（路徑動畫） - 跟蹤一個元素對象的路徑的動畫
• Vector3dAnimation（3D容器動畫） - 使用QVector3d值改變播放的動畫

動畫的動作元素

• PropertyAction（屬性動作） - 在播放動畫時改變屬性
• ScriptAction（ 腳本動作） - 在播放動畫時運行腳本

應用動畫（Applying Animations）

• 屬性動畫 - 在元素完整加載後自動運行
• 屬性動作 - 當屬性值改變時自動運行
• 獨立運行動畫 - 使用start()函數明確指定運行或者running屬性被設置爲true（ 比如通過屬性綁定）

緩衝曲線（Easing Curves）
動畫的默認緩衝類型是Easing.Linear。
一個線性插值算法將會在動畫開始時使用from的值到動畫結束時使用的to值繪製一條直線， 所以緩衝類型定義了曲線的變化情況。

注意
不要過度的使用動畫。 用戶界面動畫的設計應該儘量小心， 動畫是讓界面更加生動而不是充滿整個界面。 眼睛對於移動的東西非常敏感， 很容易干擾用戶的使用。

動畫分組（Grouped Animations）
有兩種方法來分組： ParallelAnimation（平行動畫）與SequentialAnimation（連續動畫）

import QtQuick 2.9
import QtQuick.Window 2.2
//import QtQuick.VirtualKeyboard 2.2

Window {
    id: root
    visible: true
    width: 480
    height: 300
    title: qsTr("Hello World")
    property int duration: 3000

	// 設置背景，天空
    Rectangle {
        id: sky
        width: root.width
        height: root.height * 2 / 3
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#0080FF" }
            GradientStop { position: 1.0; color: "#66CCFF" }
        }
    }

	// 設置背景，草坪
    Rectangle {
        id: ground
        anchors.top: sky.bottom
        anchors.bottom: root.bottom

        width: root.width
        height: root.height * 1 / 3
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#00FF00" }
            GradientStop { position: 1.0; color: "#00803F" }
        }
    }

	// 添加足球
    Image {
        id: ball
        x: 20; y: 240
        width: 20
        height: 20
        // 添加資源文件，否則找不到
        source: "qrc:/ball.jpg"
        MouseArea {
            anchors.fill: parent
            onClicked: {
                ball.x = 20; ball.y = 240
                anim.restart()
            }
        }
    }

	// 組合動畫
    ParallelAnimation {
        id: anim
        // Y軸運動，上下運行
        SequentialAnimation {
            NumberAnimation {
                target: ball
                properties: "y"
                to: 20
                duration: root.duration * 0.4
            }
            NumberAnimation {
                target: ball
                properties: "y"
                to: 240
                duration: root.duration * 0.6
            }
        }
        // X軸運動，往左運動
        NumberAnimation { // X1 animation
            target: ball
            properties: "x"
            to: 400
            duration: root.duration
        }

        // 旋轉運動
        RotationAnimation {
            target: ball
            properties: "rotation"
            to: 720
            duration: root.duration
       }
    }
}

後續動畫還有介紹