Qt 中的動畫(Animations)

Qt 中的動畫(Animations)

Qt中的動畫包含以下內容

1. States: 狀態
2. Transitions: 過渡
3. Animations: 動畫

概述

動畫用戶實現屬性值緩慢變化到目標值，可以應用各種類型的緩動曲線。狀態時一個對象的各種屬性的配置的一個集合。過渡用來定義從一個狀態切換到另一個狀態時如何過渡，可以在過渡中包含動畫來實現過渡。

動畫

Animation是一個抽象類，下面定義了一些具體類用於各種情況。
包含以下幾個：
4. SequentialAnimation：動畫組，裏面定義一系列的動畫，按定義先後次序執行
5. ParallelAnimation：動畫組，裏面定義一系列動畫，所有動畫並行執行
6. AnchorAnimation：針對Anchor屬性改變的動畫，與State配合時，和AnchorChanges一起配合用
7. ColorAnimation：針對顏色的動畫
8. NumberAnimation：針對數值類改變的動畫
9. ParentAnimation：針對改變父對象的動畫，與State配合時，和ParentChange一起配合用
10. PathAnimation: 創建動畫是對象沿着Path對象定義的路徑運動
11. PropertyAnimation：通用的屬性改變的動畫，與State配合時，和PropertyChanges一起配合用，（優先使用針對特定屬性的動畫）
12. RotationAnimation : 針對旋轉的動畫
13. Vector3dAnimation：針對 QVector3d數值改變的動畫
14. PropertyAction：立即改變屬性值到目標值，不應用動畫效果
15. PauseAnimation：暫停一段時間
16. SmoothedAnimation：平滑動畫，使用ease in/out quad緩動曲線
17. SpringAnimation：彈簧效果的動畫
18. ScriptAction：在動畫效果中執行腳本

動畫的使用方式

19. 在Transition中

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

    states: State {
        name: "moved"
        PropertyChanges { target: rect; x: 50 }
    }

    transitions: Transition {
        PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
    }
}

2. 在Behavior中

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

    Behavior on x { PropertyAnimation {} }

    MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
}

3. 作爲屬性值的source

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

    SequentialAnimation on x {
        loops: Animation.Infinite
        PropertyAnimation { to: 50 }
        PropertyAnimation { to: 0 }
    }
}

4. 在信號處理器中

MouseArea {
    anchors.fill: theObject
    onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
}

5. 單獨使用

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

    // this is a standalone animation, it's not running by default
    PropertyAnimation { id: animation;
                        target: theRect;
                        property: "width";
                        to: 30;
                        duration: 500 }

    MouseArea { anchors.fill: parent; onClicked: animation.running = true }
}

過渡

用來定義過渡動畫

狀態

屬性配置集合：StateGroup可以支持非Item類型，State只能用於Item類型

1. AnchorChanges：錨定方式改變
2. ParentChange：父對象改變
3. PropertyChanges：屬性改變
4. StateChangeScript：狀態中執行腳本

Rectangle {
    id: signal
    width: 200; height: 200
    state: "NORMAL"

    states: [
        State {
            name: "NORMAL"
            PropertyChanges { target: signal; color: "green"}
            PropertyChanges { target: flag; state: "FLAG_DOWN"}
        },
        State {
            name: "CRITICAL"
            PropertyChanges { target: signal; color: "red"}
            PropertyChanges { target: flag; state: "FLAG_UP"}
        }
    ]
}