在QML中，提供了很多用于設計炫酷動畫的基本類型，如下圖所示：

本文將總結QML中的動畫類型，以及一些類型的基本使用方法。

一、Animation基本動畫類型

首先，肯定是Animation類型，該類型是所有動畫類型的基本類型，注意：我們是不能在qml文檔中直接使用該類型的，該類型是一個基本類型，為不同的動畫方式提供公用的屬性和方法（可以理解成在C++中的抽象基類））。

Animation類型提供了四個屬性：

（1）alwaysRunToEnd：該屬性接收布爾類型的參數。該屬性保存動畫是否運行到完成才停止。當loops屬性被設置時，這個屬性是最有用的，因為動畫將正常播放結束，但不會重新啟動。

（2）loops：該屬性接收int類型的參數。該屬性保存播放動畫的次數。默認是1，如果該屬性設置為Animation.Infinite時，動畫將不斷重復，直到顯式停止（將running屬性設置為false，或者調用stop()方法）。

（3）paused：該屬性接布爾類型的參數。該屬性標識動畫是否暫停。設置paused屬性可以控制動畫是否暫停。在JavaScript中使用pause()和resume()方法也可以強制暫停和恢復動畫。

（4）running：該屬性接收布爾類型的參數。該屬性標識動畫當前是否正在運行。

Animation類型提供三個信號：

（1）finished()：該信號在動畫自然完成時發出。注意：當run被設置為false時，不會觸發該信號；loops屬性被設置為Animation.Infinite的動畫也不會觸發該信號。

（2）started()：這個信號在動畫開始時發出。只有頂級、獨立的動畫才會觸發該信號。過渡中的動畫或動畫組中的動畫不會觸發該信號。

（3）stopped()：當動畫結束時發出該信號。動畫可能已手動停止，或者可能已運行完成。

Animation類型提供六種方法：

（1）complete()：停止動畫，跳轉到最終屬性值。如果動畫沒有運行，調用此方法將沒有效果。在調用complete()之后，running屬性將被設置為false。與stop()不同，complete()會立即將動畫快進到結束位置。例如下列代碼：

Rectangle{
NumberAnimationonx{from:0;to:100;duration:500}
}

上面代碼中，使用NumberAnimation類型動畫Rectangle的x屬性值，動畫范圍值為：0~100。當我們在250ms時調用stop()函數，x屬性值將是50；如果調用complete()，x屬性值將為100。

（2）pause()：該方法將暫停動畫。如果動畫已經暫?；蛘咛幱谖催\行狀態，調用該方法將沒有效果。在調用pause()之后，pause屬性將被設置為true。

（3）restart()：該方法將重新開始動畫。該方法理解成是stop和start的組合：先調用stop()停止動畫，然后再調用start()開始動畫。

（4）resume()：恢復暫停的動畫。如果動畫沒有被暫?；驔]有運行，調用此方法將沒有效果。在調用resume()之后，pause屬性將被設置為false。

（5）start()：該方法將開始動畫。如果動畫已經運行了，調用該方法將沒有效果。在調用start()之后，running屬性將被設置為true。

（6）stop()：停止動畫。如果動畫沒有運行，調用該方法將不起作用。在調用stop()之后，running和paused屬性都將被設置為false。通常情況下，stop()會立即停止動畫，并且動畫不會對屬性值產生進一步的影響。在以下代碼中：

Rectangle{
NumberAnimationonx{from:0;to:100;duration:500}
}

假如我們在250ms時停止動畫，x屬性的值將為50。但如果我們設置了alwaysRunToEnd屬性，running屬性會立即變為false，但是動畫將繼續運行，直到動畫到完成位置才停止。

二、QML中的動畫類型

（2-1）動畫和轉場類型

在QML用于描述動畫和轉場的類型如下表所示：

（2-2）基于數值的屬性動畫類型

QML中基于數值的動畫類型如下表所示：

四、設計動畫

在上述第一小節中，描述了QML中動畫的基本類型：Animation，該類型是所有動畫的基本類型，我們已經知道，在實際設計動畫時是不能直接使用該類型的，需要去使用它的派生類型。

當我們在創建動畫時，需要為對象的屬性使用適當的動畫類型，并根據所需的行為類型選擇動畫方式。

設計動畫，我們應該考慮如何為對象添加動畫，總結起來，有以下四種方法：

（4-1）直接屬性動畫

該種方法通過動畫對象的屬性值來創建，隨著時間的推移逐漸改變屬性值。屬性動畫通過在屬性值變化之間插入值來平滑的移動。屬性動畫提供了時間控制，并允許通過緩動曲線進行多種插值。例如下列代碼：

Rectangle{
id:colorRectangle
width:75;
height:75
color:"blue"
opacity:1.0

MouseArea{
anchors.fill:parent
onClicked:{
animateColor.start()
}
}

PropertyAnimation{
id:animateColor;
target:colorRectangle;
properties:"color";
to:"red";
duration:1000
}
}

（4-2）預定義目標和屬性

在直接屬性動畫方法中，PropertyAnimation類型對象需要指定特定的目標和屬性值，用于指定想要動畫的對象和屬性。除此之外，我們還可以使用 on 語句來設計動畫，該語句將直接指定將要動畫的屬性。例如下列代碼：

importQtQuick2.0

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

PropertyAnimationonx{to:100}
PropertyAnimationony{to:100}
}

上述代碼中，使用PropertyAnimation指定了在rect代表矩形的x和y屬性上的動畫。

預定義目標和屬性也可以在分組動畫中使用，用于確保組內所有動畫都應用到相同的屬性上。例如下列代碼：

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

SequentialAnimationoncolor{
ColorAnimation{to:"red";duration:1000}
ColorAnimation{to:"blue";duration:1000}
}
}

上述代碼中，將以串行方式動畫Rectangle的color屬性。顏色動畫使用ColorAnimation類型來描述，在上述代碼中，Rectangle的顏色將從黃色變成紅色，然后變成藍色。

（4-3）狀態轉換動畫

在Qt Quick中，States是Item的屬性配置項，屬性可能有不同的值來反映不同的狀態。狀態變化會帶來屬性變化，這時候我們可以平滑過渡屬性變化，從而可以形成動畫效果。

QML中，Transition用于包含動畫類型，來表示狀態變化引起的屬性變化。

例如：假設按鈕可能有兩種狀態，當用戶單擊按鈕時為按下狀態，當用戶釋放按鈕時為釋放狀態。因此，我們可以為每個狀態分配不同的屬性配置。然后使用一個Transition將使從被按下狀態到被釋放狀態的變化產生動畫效果。同樣地，在從釋放狀態到按下狀態的變化過程中也會有一個動畫。代碼如下：

Rectangle{
width:75;
height:75
id:button
state:"RELEASED"
radius:5

MouseArea{
anchors.fill:parent
onPressed:button.state="PRESSED"
onReleased:button.state="RELEASED"
}

states:[
State{
name:"PRESSED"
PropertyChanges{target:button;color:"blue"}
},
State{
name:"RELEASED"
PropertyChanges{target:button;color:"red"}
}
]

transitions:[
Transition{
from:"PRESSED"
to:"RELEASED"
ColorAnimation{target:button;duration:100}
},
Transition{
from:"RELEASED"
to:"PRESSED"
ColorAnimation{target:button;duration:100}
}
]
}

上述代碼中，是由狀態和狀態轉換動畫組合完成的，首先使用State定義矩形的兩種狀態：PRESSED、RELEASE，在這兩種狀態下分別定義兩種顏色。然后使用Transition定義兩種狀態轉換動畫：（1）從PRESSED到RELEASE狀態轉換動畫。（2）從RELEASE到PRESSED狀態轉換動畫。在MouseArea類型鼠標事件處理程序中指定鼠標操作對應的矩態：當鼠標按鈕按下時，button為PRESSED狀態；當鼠標按鈕釋放時，button為RELEASE狀態。運行效果如下圖所示：

將to和from屬性綁定到狀態名稱，將把特定的轉換分配給狀態更改。將to屬性設置為通配符“*”，表示轉換適用于任何狀態更改：

transitions:
Transition{
to:"*"
ColorAnimation{target:button;duration:100}
}

（4-4）使用Behavior定義默認的屬性動畫

默認的屬性動畫是使用Behavior設置的。在Behavior類型中聲明的動畫應用于屬性，并使屬性值的變化發生動畫。Behavior類型有一個enabled屬性來特意啟用或禁用行為動畫。當屬性值發生改變時，將按照Behavior指定的動畫進行動畫改變。

例如下列代碼：

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

Behavioronwidth{
NumberAnimation{duration:1000}
}

Behavioronx
{
NumberAnimation{duration:1000}
}

Behavioroncolor{
ColorAnimation{duration:1000}
}

Behavioronradius
{
NumberAnimation{duration:1000}
}

MouseArea{
anchors.fill:parent
onClicked:{
rect.width=50;
rect.x=100
rect.color="blue";
rect.radius=50;
}
}
}

上述代碼中，使用Behavior為Rectangle的width、x、color和radius屬性指定了默認動畫。然后定義了一個MouseArea用于接收鼠標事件，在鼠標的點擊事件處理程序中，改變width、x、color和radius屬性的值，那么該Rectangle將按照默認指定的動畫來更改屬性值。效果如下：

Behavior on 是將行為動畫分配到屬性上的一種快捷方法。

五、并行或串行播放動畫

動畫可以并行運行，也可以串行運行。并行動畫會同時播放一組動畫，而串行動畫會依次播放一組動畫。在SequentialAnimation和ParallelAnimation中分組的動畫會按順序或并行播放動畫。例如下列代碼：

Rectangle{
id:banner
width:150;
height:100;
border.color:"black"
color:"lightblue"

Column{
anchors.centerIn:parent
Text{
id:text1
text:"iriczhao-01"
opacity:0.01
color:"red"
}
Text{
id:text2
text:"iriczhao-02"
opacity:0.01
color:"white"
}
Text{
id:text3
text:"iriczhao-03"
opacity:0.01
color:"blue"
}
spacing:10
}

MouseArea{
anchors.fill:parent
onPressed:playTextBanner.start()
}

SequentialAnimation{
id:playTextBanner
running:false
NumberAnimation{target:text1;property:"opacity";to:1.0;duration:200}
NumberAnimation{target:text2;property:"opacity";to:1.0;duration:200}
NumberAnimation{target:text3;property:"opacity";to:1.0;duration:200}
}
}

上述代碼首先定義了三個本文顯示類型，分別顯示不同的文本，然后定義了MouseArea類型用于接收鼠標的點擊事件，該鼠標點擊區域為長為150，寬度為100的Rectangle。還設計了一個名為playTextBanner的串行動畫。當我們的鼠標在id為banner的矩形區域內點擊的時候，將會執行這個串行動畫。在串行動畫中，使用NumberAnimation數值動畫類型改變三個Text類型文本的“opacity”屬性值，從而實現三個文本的依次顯示。效果如下：

一旦單個動畫被放置到SequentialAnimation或ParallelAnimation中，它們就不能再獨立的啟動和停止。串行或并行動畫必須以一個組的方式啟動和停止。

SequentialAnimation類型對于播放Transition動畫也很有用，因為動畫是在Transition內部并行播放的。

五、尾

本文主要記錄了關于QML動畫的基本類型，以及使用這些類型設計動畫的基本方法。State、Transition和Animation派生類型是設計QML動畫的必須元素。高版本的Qt支持使用時間線和關鍵幀來創建動畫，這一部分內容就在后續文中寫了。

在實際使用中，我們不用手動去編寫動畫相關的代碼，可以直接使用Qt Design Studio去設計即可，該工具會自動生成動畫相關的代碼，我們只需要能看懂生成的代碼就可以了，開發效率是非常高的。

審核編輯 ：李倩