QML動畫 十一

動畫在Qt幫助手冊中查看QML Animation關鍵字

 

QML中的動畫實現通對象的屬性值隨着時間而改變。

1.動畫類型

    一個動畫創建方式取決於它所需要的背景。以Rectangle的運動為例，就是改變它的x或者是y屬性的值，其動畫的語義的不同依賴於是否要創建以下幾點：

• Rectangle一旦創建該動畫就要將其移動到一個已知的位置
• 動畫只有在Rectangle被外部源移動時才會觸發。例如，當單擊鼠標時，產生動畫移動到鼠標位置。
• 只有在接收到一個特定的信號后才觸發該動畫
• 作為一個獨立的動畫，雖然沒有綁定Rectangle運動，但是可以從腳本中進行開啟和停止。
• 只有狀態改變時才會觸發該動畫。

為了支持這些不同類型的動畫方式，QML提供了多種方式來定義一個動畫：

• 使用屬性值源來創建一個動畫，可以立即為一個指定的屬性使用動畫；
• 使用行為動畫，當一個屬性改變值時觸發
• 在一個信號處理器中創建，當接收到一個信號時觸發
• 作為一個獨立動畫，可以在腳本中進行開始、停止。也可以重新綁定到不同的對象。
• 使用切換，在不同狀態間提供動畫。

    下面分別介紹這些方式。在這里都會使用到PropertyChanges元素，它可以用來創建一個動畫，后面會對其詳細介紹。

 

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

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

    Rectangle{
        id:window
        width:40; height:50
        color:"red"
        PropertyAnimation on x {to:50; duration:1000;loops:Animation.Infinite}
        PropertyAnimation on y {to:50; duration:1000;loops:Animation.Infinite}
}

　　在Rectangle的x和y屬性上應用了PropertyAnimation,在1000ms內使用動畫變化到50.此時，rectangl一旦加載完畢，動畫就會開啟。設置起始值使用from. loops指定為animation.infinite表明該動畫是無限循環的。指定一個動畫為屬性值源，在一個對象加載完成后立即就對一個屬性使用動畫變化到一個指定的值的情況是非常有用的。

 

3. 行為動畫

   經常在一個特定的屬性值改變時要應用一個動畫，在這種情況下，可以使用一個Behavior為一個屬性改變指定一個默認的動畫。

Window {
    visible: true
    Rectangle{
        id:window
        width:40; height:50
        color:"red"
        Behavior on x {PropertyAnimation{duration:50}}
        Behavior on y {PropertyAnimation{duration:50}}
    }

    MouseArea{
    anchors.fill: parent;
    onClicked: {window.x = mouse.x; window.y = mouse.y}
    }
}

　　rectangle擁有一個behavior對象應用到了它的x和y屬性。每當這些屬性改變時，在behavior中的propertyanimiation對象就會應用到這些屬性上，從而使rectangle使用動畫效果移動到一個新的位置。行為動畫實在每次響應一個值的變化時觸發的。對這些屬性的任何改變都會觸發它們的動畫。如果x，y綁定到了其他屬性上，這些屬性改變時也會觸發動畫。。

 

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

    可以在一個信號處理器中創建一個動畫，並在接收到信號時觸發。

 Rectangle{
        id:window
        width:40; height:50
        color:"red"
    }
    MouseArea{
    anchors.fill: parent;
    onClicked:PropertyAnimation {target:window; properties: "x,y";
                                 to:50;duration:1000}
    }

　　因為動畫沒有綁定到一個特定的對象或者屬性，所以必須指定target和property屬性的值。而且還需要使用to屬性來指定新的x和y的值。

 

5 獨立動畫

   動畫也可以像一個普通的qml對象一樣進行創建，而不需要綁定到任何特定的對象和屬性。屬性既是ProperityAnimation

Rectangle{
        id:rect
        width:40; height:50
        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屬性的值。也需要使用to屬性來指定新的x和y的值。獨立動畫在不是對一個單一對象屬性進行動畫而且動畫需要明確開始和停止的情況下是非常有用的。

6.切換

   切換是用來設置當狀態改變時的動畫，要創建一個切換，需要定義一個Transition對象，然后將其添加到項目的transitions屬性。

Rectangle{
        id:rect
        width:40; height:50
        color:"red"
        MouseArea{
        anchors.fill: parent;
        onClicked:{
            rect.state = "moved"
        }
        }
        states: State{
        name:"moved"
        PropertyChanges {
            target: rect
            x:50;y:50;
        }
        }
        transitions:Transition{
            PropertyAnimation{properties: "x,y";duration:1000}
        }
}

　　注意，這里幾個對象都是rectangle的子對象。前面的例子都是在同一層面。在moved狀態中，propertychanges對象定義了當Rectangle在該狀態時其位置應該改變為（50 50）。當Rectangle改變到moved狀態時，Transiton將被觸發，切換的PropertyAnimation將會使用動畫將x.y屬性改變到它們的新值。注意這里並沒有為Property設置from和to屬性的值，在狀態改變的開始之前和結束之后會自動設置這些屬性為x和Y的屬性值。另外，propertyanimation並不需要指定target對象，這樣任何對象的x和y值在狀態改變時進行更改都會使用動畫。不過也可以指定一個target來為特定的對象使用動畫。在Transiton中的頂級動畫會並行運行，要想一個接一個地運行，可以使用SequentialAnimation。

 

另外還有 動畫元素、屬性動畫元素、組合動畫等可以在幫助文檔中查看詳細介紹。

彈動效果Flickable和翻轉效果flipable。

查看示例程序：Flipable example。