在QML中，提供了很多用于設(shè)計(jì)炫酷動(dòng)畫(huà)的基本類型，如下圖所示：

本文將總結(jié)QML中的動(dòng)畫(huà)類型，以及一些類型的基本使用方法。

一、Animation基本動(dòng)畫(huà)類型

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

Animation類型提供了四個(gè)屬性：

（1）alwaysRunToEnd：該屬性接收布爾類型的參數(shù)。該屬性保存動(dòng)畫(huà)是否運(yùn)行到完成才停止。當(dāng)loops屬性被設(shè)置時(shí)，這個(gè)屬性是最有用的，因?yàn)閯?dòng)畫(huà)將正常播放結(jié)束，但不會(huì)重新啟動(dòng)。

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

（3）paused：該屬性接布爾類型的參數(shù)。該屬性標(biāo)識(shí)動(dòng)畫(huà)是否暫停。設(shè)置paused屬性可以控制動(dòng)畫(huà)是否暫停。在JavaScript中使用pause()和resume()方法也可以強(qiáng)制暫停和恢復(fù)動(dòng)畫(huà)。

（4）running：該屬性接收布爾類型的參數(shù)。該屬性標(biāo)識(shí)動(dòng)畫(huà)當(dāng)前是否正在運(yùn)行。

Animation類型提供三個(gè)信號(hào)：

（1）finished()：該信號(hào)在動(dòng)畫(huà)自然完成時(shí)發(fā)出。注意：當(dāng)run被設(shè)置為false時(shí)，不會(huì)觸發(fā)該信號(hào)；loops屬性被設(shè)置為Animation.Infinite的動(dòng)畫(huà)也不會(huì)觸發(fā)該信號(hào)。

（2）started()：這個(gè)信號(hào)在動(dòng)畫(huà)開(kāi)始時(shí)發(fā)出。只有頂級(jí)、獨(dú)立的動(dòng)畫(huà)才會(huì)觸發(fā)該信號(hào)。過(guò)渡中的動(dòng)畫(huà)或動(dòng)畫(huà)組中的動(dòng)畫(huà)不會(huì)觸發(fā)該信號(hào)。

（3）stopped()：當(dāng)動(dòng)畫(huà)結(jié)束時(shí)發(fā)出該信號(hào)。動(dòng)畫(huà)可能已手動(dòng)停止，或者可能已運(yùn)行完成。

Animation類型提供六種方法：

（1）complete()：停止動(dòng)畫(huà)，跳轉(zhuǎn)到最終屬性值。如果動(dòng)畫(huà)沒(méi)有運(yùn)行，調(diào)用此方法將沒(méi)有效果。在調(diào)用complete()之后，running屬性將被設(shè)置為false。與stop()不同，complete()會(huì)立即將動(dòng)畫(huà)快進(jìn)到結(jié)束位置。例如下列代碼：

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

上面代碼中，使用NumberAnimation類型動(dòng)畫(huà)Rectangle的x屬性值，動(dòng)畫(huà)范圍值為：0~100。當(dāng)我們?cè)?50ms時(shí)調(diào)用stop()函數(shù)，x屬性值將是50；如果調(diào)用complete()，x屬性值將為100。

（2）pause()：該方法將暫停動(dòng)畫(huà)。如果動(dòng)畫(huà)已經(jīng)暫?；蛘咛幱谖催\(yùn)行狀態(tài)，調(diào)用該方法將沒(méi)有效果。在調(diào)用pause()之后，pause屬性將被設(shè)置為true。

（3）restart()：該方法將重新開(kāi)始動(dòng)畫(huà)。該方法理解成是stop和start的組合：先調(diào)用stop()停止動(dòng)畫(huà)，然后再調(diào)用start()開(kāi)始動(dòng)畫(huà)。

（4）resume()：恢復(fù)暫停的動(dòng)畫(huà)。如果動(dòng)畫(huà)沒(méi)有被暫停或沒(méi)有運(yùn)行，調(diào)用此方法將沒(méi)有效果。在調(diào)用resume()之后，pause屬性將被設(shè)置為false。

（5）start()：該方法將開(kāi)始動(dòng)畫(huà)。如果動(dòng)畫(huà)已經(jīng)運(yùn)行了，調(diào)用該方法將沒(méi)有效果。在調(diào)用start()之后，running屬性將被設(shè)置為true。

（6）stop()：停止動(dòng)畫(huà)。如果動(dòng)畫(huà)沒(méi)有運(yùn)行，調(diào)用該方法將不起作用。在調(diào)用stop()之后，running和paused屬性都將被設(shè)置為false。通常情況下，stop()會(huì)立即停止動(dòng)畫(huà)，并且動(dòng)畫(huà)不會(huì)對(duì)屬性值產(chǎn)生進(jìn)一步的影響。在以下代碼中：

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

假如我們?cè)?50ms時(shí)停止動(dòng)畫(huà)，x屬性的值將為50。但如果我們?cè)O(shè)置了alwaysRunToEnd屬性，running屬性會(huì)立即變?yōu)閒alse，但是動(dòng)畫(huà)將繼續(xù)運(yùn)行，直到動(dòng)畫(huà)到完成位置才停止。

二、QML中的動(dòng)畫(huà)類型

（2-1）動(dòng)畫(huà)和轉(zhuǎn)場(chǎng)類型

在QML用于描述動(dòng)畫(huà)和轉(zhuǎn)場(chǎng)的類型如下表所示：

（2-2）基于數(shù)值的屬性動(dòng)畫(huà)類型

QML中基于數(shù)值的動(dòng)畫(huà)類型如下表所示：

四、設(shè)計(jì)動(dòng)畫(huà)

在上述第一小節(jié)中，描述了QML中動(dòng)畫(huà)的基本類型：Animation，該類型是所有動(dòng)畫(huà)的基本類型，我們已經(jīng)知道，在實(shí)際設(shè)計(jì)動(dòng)畫(huà)時(shí)是不能直接使用該類型的，需要去使用它的派生類型。

當(dāng)我們?cè)趧?chuàng)建動(dòng)畫(huà)時(shí)，需要為對(duì)象的屬性使用適當(dāng)?shù)膭?dòng)畫(huà)類型，并根據(jù)所需的行為類型選擇動(dòng)畫(huà)方式。

設(shè)計(jì)動(dòng)畫(huà)，我們應(yīng)該考慮如何為對(duì)象添加動(dòng)畫(huà)，總結(jié)起來(lái)，有以下四種方法：

（4-1）直接屬性動(dòng)畫(huà)

該種方法通過(guò)動(dòng)畫(huà)對(duì)象的屬性值來(lái)創(chuàng)建，隨著時(shí)間的推移逐漸改變屬性值。屬性動(dòng)畫(huà)通過(guò)在屬性值變化之間插入值來(lái)平滑的移動(dòng)。屬性動(dòng)畫(huà)提供了時(shí)間控制，并允許通過(guò)緩動(dòng)曲線進(jìn)行多種插值。例如下列代碼：

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）預(yù)定義目標(biāo)和屬性

在直接屬性動(dòng)畫(huà)方法中，PropertyAnimation類型對(duì)象需要指定特定的目標(biāo)和屬性值，用于指定想要?jiǎng)赢?huà)的對(duì)象和屬性。除此之外，我們還可以使用 on 語(yǔ)句來(lái)設(shè)計(jì)動(dòng)畫(huà)，該語(yǔ)句將直接指定將要?jiǎng)赢?huà)的屬性。例如下列代碼：

importQtQuick2.0

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

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

上述代碼中，使用PropertyAnimation指定了在rect代表矩形的x和y屬性上的動(dòng)畫(huà)。

預(yù)定義目標(biāo)和屬性也可以在分組動(dòng)畫(huà)中使用，用于確保組內(nèi)所有動(dòng)畫(huà)都應(yīng)用到相同的屬性上。例如下列代碼：

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

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

上述代碼中，將以串行方式動(dòng)畫(huà)Rectangle的color屬性。顏色動(dòng)畫(huà)使用ColorAnimation類型來(lái)描述，在上述代碼中，Rectangle的顏色將從黃色變成紅色，然后變成藍(lán)色。

（4-3）狀態(tài)轉(zhuǎn)換動(dòng)畫(huà)

在Qt Quick中，States是Item的屬性配置項(xiàng)，屬性可能有不同的值來(lái)反映不同的狀態(tài)。狀態(tài)變化會(huì)帶來(lái)屬性變化，這時(shí)候我們可以平滑過(guò)渡屬性變化，從而可以形成動(dòng)畫(huà)效果。

QML中，Transition用于包含動(dòng)畫(huà)類型，來(lái)表示狀態(tài)變化引起的屬性變化。

例如：假設(shè)按鈕可能有兩種狀態(tài)，當(dāng)用戶單擊按鈕時(shí)為按下?tīng)顟B(tài)，當(dāng)用戶釋放按鈕時(shí)為釋放狀態(tài)。因此，我們可以為每個(gè)狀態(tài)分配不同的屬性配置。然后使用一個(gè)Transition將使從被按下?tīng)顟B(tài)到被釋放狀態(tài)的變化產(chǎn)生動(dòng)畫(huà)效果。同樣地，在從釋放狀態(tài)到按下?tīng)顟B(tài)的變化過(guò)程中也會(huì)有一個(gè)動(dòng)畫(huà)。代碼如下：

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}
}
]
}

上述代碼中，是由狀態(tài)和狀態(tài)轉(zhuǎn)換動(dòng)畫(huà)組合完成的，首先使用State定義矩形的兩種狀態(tài)：PRESSED、RELEASE，在這兩種狀態(tài)下分別定義兩種顏色。然后使用Transition定義兩種狀態(tài)轉(zhuǎn)換動(dòng)畫(huà)：（1）從PRESSED到RELEASE狀態(tài)轉(zhuǎn)換動(dòng)畫(huà)。（2）從RELEASE到PRESSED狀態(tài)轉(zhuǎn)換動(dòng)畫(huà)。在MouseArea類型鼠標(biāo)事件處理程序中指定鼠標(biāo)操作對(duì)應(yīng)的矩態(tài)：當(dāng)鼠標(biāo)按鈕按下時(shí)，button為PRESSED狀態(tài)；當(dāng)鼠標(biāo)按鈕釋放時(shí)，button為RELEASE狀態(tài)。運(yùn)行效果如下圖所示：

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

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

（4-4）使用Behavior定義默認(rèn)的屬性動(dòng)畫(huà)

默認(rèn)的屬性動(dòng)畫(huà)是使用Behavior設(shè)置的。在Behavior類型中聲明的動(dòng)畫(huà)應(yīng)用于屬性，并使屬性值的變化發(fā)生動(dòng)畫(huà)。Behavior類型有一個(gè)enabled屬性來(lái)特意啟用或禁用行為動(dòng)畫(huà)。當(dāng)屬性值發(fā)生改變時(shí)，將按照Behavior指定的動(dòng)畫(huà)進(jìn)行動(dòng)畫(huà)改變。

例如下列代碼：

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屬性指定了默認(rèn)動(dòng)畫(huà)。然后定義了一個(gè)MouseArea用于接收鼠標(biāo)事件，在鼠標(biāo)的點(diǎn)擊事件處理程序中，改變width、x、color和radius屬性的值，那么該Rectangle將按照默認(rèn)指定的動(dòng)畫(huà)來(lái)更改屬性值。效果如下：

Behavior on 是將行為動(dòng)畫(huà)分配到屬性上的一種快捷方法。

五、并行或串行播放動(dòng)畫(huà)

動(dòng)畫(huà)可以并行運(yùn)行，也可以串行運(yùn)行。并行動(dòng)畫(huà)會(huì)同時(shí)播放一組動(dòng)畫(huà)，而串行動(dòng)畫(huà)會(huì)依次播放一組動(dòng)畫(huà)。在SequentialAnimation和ParallelAnimation中分組的動(dòng)畫(huà)會(huì)按順序或并行播放動(dòng)畫(huà)。例如下列代碼：

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}
}
}

上述代碼首先定義了三個(gè)本文顯示類型，分別顯示不同的文本，然后定義了MouseArea類型用于接收鼠標(biāo)的點(diǎn)擊事件，該鼠標(biāo)點(diǎn)擊區(qū)域?yàn)殚L(zhǎng)為150，寬度為100的Rectangle。還設(shè)計(jì)了一個(gè)名為playTextBanner的串行動(dòng)畫(huà)。當(dāng)我們的鼠標(biāo)在id為banner的矩形區(qū)域內(nèi)點(diǎn)擊的時(shí)候，將會(huì)執(zhí)行這個(gè)串行動(dòng)畫(huà)。在串行動(dòng)畫(huà)中，使用NumberAnimation數(shù)值動(dòng)畫(huà)類型改變?nèi)齻€(gè)Text類型文本的“opacity”屬性值，從而實(shí)現(xiàn)三個(gè)文本的依次顯示。效果如下：

一旦單個(gè)動(dòng)畫(huà)被放置到SequentialAnimation或ParallelAnimation中，它們就不能再獨(dú)立的啟動(dòng)和停止。串行或并行動(dòng)畫(huà)必須以一個(gè)組的方式啟動(dòng)和停止。

SequentialAnimation類型對(duì)于播放Transition動(dòng)畫(huà)也很有用，因?yàn)閯?dòng)畫(huà)是在Transition內(nèi)部并行播放的。

五、尾

本文主要記錄了關(guān)于QML動(dòng)畫(huà)的基本類型，以及使用這些類型設(shè)計(jì)動(dòng)畫(huà)的基本方法。State、Transition和Animation派生類型是設(shè)計(jì)QML動(dòng)畫(huà)的必須元素。高版本的Qt支持使用時(shí)間線和關(guān)鍵幀來(lái)創(chuàng)建動(dòng)畫(huà)，這一部分內(nèi)容就在后續(xù)文中寫(xiě)了。

在實(shí)際使用中，我們不用手動(dòng)去編寫(xiě)動(dòng)畫(huà)相關(guān)的代碼，可以直接使用Qt Design Studio去設(shè)計(jì)即可，該工具會(huì)自動(dòng)生成動(dòng)畫(huà)相關(guān)的代碼，我們只需要能看懂生成的代碼就可以了，開(kāi)發(fā)效率是非常高的。

審核編輯 ：李倩