QML 屬性動畫經典案例之足球運動

1. 所有動畫的基類Animation

Animation動畫類型不能直接在QML檔案中使用。它的存在是為了提供一組通用的屬性和方法，可用于繼承自它的所有其他動畫類型。直接使用Animation類型會導緻錯誤，類似C++的抽象類。

1.1 Animation類型的常用屬性

• loops:int 設定目前動畫循環的次數
• paused:bool 表示目前動畫是否暫停，可讀可寫，功能與stop()pause()類似
• running:bool 辨別目前動畫是否正在運作

2. Animation動畫類型的常用子類

下述列出的動畫均是Animation的子類

2.1 錨定轉場動畫AnchorAnimation

AnchorAnimation:一般用于在錨定布局發生變化時候的轉場動畫，當在轉換中使用錨定動畫時，它将對狀态更改期間發生的任何錨定更改進行動畫處理。這可以通過使用AnchorChanges設定特定的目标項來覆寫。目标屬性。

注意:AnchorAnimation隻能在Transition中使用，并與AnchorChange一起使用。它不能用于行為和其他類型的動畫

2.2 并列式動畫ParallelAnimation

定義在并列式動畫對象内的幾組動畫在播放時沒有先後順序，都會同時播放，并列式動畫同時也支援内嵌序列式動畫組和單個動畫

2.3 序列式動畫SequentialAnimation

與并列式相反，定義在序列式動畫内的動畫會按照動畫建立的先後順序依次執行，與并列式動畫都可以了解為是單個動畫的容器類動畫。

2.4 屬性動畫PropertyAnimatio

和對象屬性相關的動畫，可以定義屬性的值按照某種已知曲線從

from

到

to

的轉換，PropertyAnimation被NumberAnimation，RotationAnimation和ColorAnimation所繼承

2.5 路徑動畫PathAnimation

定義和路徑相關的動畫，與Path和Transaction共同使用，定義路徑動畫

3. 關于動畫的重要屬性

3.1 easing動畫緩沖曲線

一般地，在動畫運作時，運作規律不都是線性的，有時候需要讓動畫按某種曲線斜率變化着運作，這時就需要指定動畫的easing屬性，Qt内置許多動畫曲線，保證動畫運作的多樣性

3.2 target動畫運作的目标對象

在PropertyAnimation中，往往需要運作動畫的目标對象，表示屬性值的改變是該目标對象的屬性值

3.3 property屬性指定

一般地，目标對象的屬性不止一個，在指定屬性動畫時，需要明确動畫改變哪個屬性，就是用property,也可一次指定多個屬性，使用properties指定

3.4 duration單次動畫運作時長

指定目前動畫從開始到結束運作的時間，機關ms，對于特殊的動畫，有時還需要指定動畫的振幅，周期，超調資訊等等

3.5 from屬性

标志目前動畫的初始值

3.6 to屬性

4 經典案例：使用動畫描繪足球運動軌迹

import QtQuick 2.12
import QtQuick.Window 2.12


Window {
    id:root
    visible: true
    width: 1500
    height: 300
    title: qsTr("Window Test")
    flags: Qt.FramelessWindowHint
    y:1200
    //準備地面和天空
    Rectangle {
        id: sky
        width: parent.width
        height: 200
        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: parent.width
        color:"#00802F"
//        gradient: Gradient {
//            GradientStop { position: 0.0; color: "#00FF00" }
//            GradientStop { position: 1.0; color: "#00802F" }
//        }
    }
    //準備足球
    Image {
        id: ball
        x: 20; y: 240
        source: "qrc:/images/ball.png"
        MouseArea {
            anchors.fill: parent
            onClicked: {
                ball.x = 20; ball.y = 240
                anim.restart()
            }
        }
    }
    //準備序列動畫
    ParallelAnimation {
        id: anim
        SequentialAnimation {
            NumberAnimation {
                target: ball
                properties: "y"
                to: 20
                duration: 2000
                easing.type: Easing.OutCirc
            }
            NumberAnimation {
                target: ball
                properties: "y"
                to: 240
                duration: 2000
                easing.type: Easing.OutBounce
            }
        }
        SequentialAnimation{
            NumberAnimation {
                target: ball
                properties: "x"
                to: 400
                duration: 2000
                easing.type: Easing.Linear
            }
            NumberAnimation {
                target: ball
                properties: "x"
                to: 650
                duration: 2000
                easing.type: Easing.Linear
            }
        }


        RotationAnimation {
            target: ball
            properties: "rotation"
            to: 720
            duration: 4000
            easing.type: Easing.Linear
        }
    }
}
           

3.1 運作結果如下