在QML動(dòng)畫(huà)設(shè)計(jì)中，可以通過(guò)指定關(guān)鍵幀創(chuàng)建時(shí)間線動(dòng)畫(huà)；還可以將時(shí)間線綁定到組件（如滑塊）的屬性值，以這種方式控制動(dòng)畫(huà)。

一、創(chuàng)建動(dòng)畫(huà)

無(wú)論是關(guān)鍵幀動(dòng)畫(huà)還是綁定到屬性值的動(dòng)畫(huà)，首先要做的就是創(chuàng)建時(shí)間線。步驟如下

（1-1）創(chuàng)建時(shí)間軸

（1）在Timeline視圖中，選擇+(Add Timeline)按鈕添加時(shí)間線設(shè)置，并在Timeline Settings對(duì)話框中添加動(dòng)畫(huà)。

（2）在Timeline Settings標(biāo)簽中：

在Timeline ID字段中，鍵入id值用于描述timeline。

在Start frame字段中，設(shè)置timeline的第一幀（允許為負(fù)數(shù)）。

在End frame字段中，設(shè)置timeline的最后一幀。

（3）在Animation Setting標(biāo)簽中：

在Animation ID字段中，鍵入ID描述一個(gè)動(dòng)畫(huà)。

選中“Running in Base State”復(fù)選框以在應(yīng)用基本狀態(tài)時(shí)運(yùn)行動(dòng)畫(huà)。

在Start frame字段中，設(shè)置動(dòng)畫(huà)的第一幀。

在End frame字段中，設(shè)置動(dòng)畫(huà)的最后一幀。

在Duration字段中，以毫秒為單位設(shè)置動(dòng)畫(huà)的長(zhǎng)度。

選擇“Continues”復(fù)選框可以無(wú)限循環(huán)動(dòng)畫(huà)（該選項(xiàng)為可選項(xiàng)）。

選中“Ping pong”復(fù)選框可在動(dòng)畫(huà)結(jié)束時(shí)將其向后播放到開(kāi)始，即表示一種反彈效果（該選項(xiàng)為可選項(xiàng)）。

在Finished字段中，選擇動(dòng)畫(huà)完成后要轉(zhuǎn)換到的狀態(tài)。

（4）選擇Close關(guān)閉對(duì)話框并保存設(shè)置。

到目前為止，我們已經(jīng)創(chuàng)建了Timeline和動(dòng)畫(huà)，然后我們可以為屬性設(shè)置動(dòng)畫(huà)的關(guān)鍵幀了。

（1-2）創(chuàng)建多條時(shí)間線

在實(shí)際QML動(dòng)畫(huà)設(shè)計(jì)過(guò)程中，我們可以創(chuàng)建多個(gè)時(shí)間線。創(chuàng)建多個(gè)時(shí)間線可以用于：是在不同的狀態(tài)下使用不同的時(shí)間線。

（1）在Timeline視圖中，打開(kāi)Timeline Settings對(duì)話框。

（2）點(diǎn)擊Timelineline Setting標(biāo)簽的右上方“+”按鈕，即可創(chuàng)建另一個(gè)時(shí)間線（當(dāng)不需要的時(shí)候，點(diǎn)擊“-”按鈕即可刪除該條時(shí)間線）

（3）在Animation Settings選項(xiàng)卡下的表格中，為狀態(tài)設(shè)置時(shí)間線。

要為創(chuàng)建的時(shí)間線設(shè)置關(guān)鍵幀值，首先在States中選擇狀態(tài)，且需要保證時(shí)間線在Timelines視圖中可用。

二、設(shè)置關(guān)鍵幀值

當(dāng)我們?cè)趧?chuàng)建時(shí)間線時(shí)，Qt Design Studio將會(huì)為時(shí)間線創(chuàng)建一個(gè)動(dòng)畫(huà)。在實(shí)際開(kāi)發(fā)中，我們也可以為一個(gè)時(shí)間線創(chuàng)建多個(gè)動(dòng)畫(huà)。例如，可以創(chuàng)建動(dòng)畫(huà)來(lái)運(yùn)行時(shí)間軸的一小段或反向運(yùn)行時(shí)間線。

要?jiǎng)赢?huà)Timeline視圖中的組件，我們需要為動(dòng)畫(huà)的屬性設(shè)置關(guān)鍵幀值。Qt Design Studio會(huì)自動(dòng)在兩個(gè)關(guān)鍵幀之間添加插值，并均勻地設(shè)置它們的值。

為一個(gè)組件的屬性設(shè)置關(guān)鍵幀值，步驟如下：

（1）在Navigate視圖中，選擇需要?jiǎng)赢?huà)的組件。

（2）在Properties視圖中，選擇Action->Insert Keyframe為想要?jiǎng)赢?huà)的屬性插入關(guān)鍵幀。如下圖所示：

（3）在Timeline視圖中，選擇Per Property Recording按鈕開(kāi)始記錄屬性更改。

（4）在時(shí)間線上的屬性名稱(chēng)旁邊的字段中輸入屬性的值（確保播放頭在第0幀）。然后按“Enter”保存設(shè)置，如下圖所示：

（5）將時(shí)間線上的播放頭移動(dòng)到另一幀并指定該幀上的屬性值。

（6）在指定了所需的值后，再次選擇Per Property Recording以停止記錄。

三、將時(shí)間線綁定到屬性

當(dāng)我們將時(shí)間線綁定到組件屬性時(shí)，動(dòng)畫(huà)的當(dāng)前幀由該屬性的值控制。

假如有這樣一個(gè)示例：將時(shí)間軸綁定到slider組件，時(shí)間軸上的動(dòng)畫(huà)通過(guò)slider的滑動(dòng)值來(lái)確定。

其時(shí)間線和關(guān)鍵幀設(shè)置步驟如下：

（1）首先，我們從Components中拖一個(gè)slider到2D或Navigator視圖中。

（2）在Navigator視圖中，選擇slider并進(jìn)入其Properties視圖中，設(shè)置To屬性為1000（如果想用滑塊控制完整的動(dòng)畫(huà)，滑塊的From和To值應(yīng)該與時(shí)間線的Start Frame和End Frame值匹配。）

（3）在Timeline Settings對(duì)話框中，可以選擇右上角“-”按鈕刪除動(dòng)畫(huà)。

（4）在Expression binding中，輸入slider.value綁定表達(dá)式。如下圖所示：

四、將動(dòng)畫(huà)綁定到狀態(tài)

我們可以將動(dòng)畫(huà)綁定到狀態(tài)，這意味著當(dāng)進(jìn)入狀態(tài)時(shí)，動(dòng)畫(huà)會(huì)自動(dòng)運(yùn)行。

將動(dòng)畫(huà)綁定到狀態(tài)的步驟如下：

（1）在Timeline Setting對(duì)話框底部的表格中：

雙擊Timeline字段中的值，并選擇帶有要綁定到狀態(tài)的動(dòng)畫(huà)的時(shí)間線。

雙擊Animation字段中的值并選擇要綁定到狀態(tài)的動(dòng)畫(huà)。

如果想要在不運(yùn)行動(dòng)畫(huà)的情況下將狀態(tài)綁定到動(dòng)畫(huà)中的某個(gè)關(guān)鍵幀，需在Fixed Frame字段中設(shè)置關(guān)鍵幀：

五、管理關(guān)鍵幀

在本小節(jié)中，描述如何編輯、拷貝、刪除關(guān)鍵幀。

（5-1）編輯關(guān)鍵幀

要?jiǎng)h除屬性更改記錄，在時(shí)間軸線右鍵單擊屬性名稱(chēng)并選擇“Remove Property”即可：

要在當(dāng)前的播放幀上向組件的關(guān)鍵幀軌道添加關(guān)鍵幀，在時(shí)間線上右鍵單擊組件名稱(chēng)并選擇“Add Keyframes at Current Frame”即可。

（5-2）編輯關(guān)鍵幀的值

如果我們需要微調(diào)關(guān)鍵幀的值，可以雙擊關(guān)鍵幀標(biāo)記或右鍵單擊菜單，在彈出菜單中選擇“Edit Keyframe”。

“Edit Keyframe”對(duì)話框中，顯示了當(dāng)前幀動(dòng)畫(huà)的屬性以及當(dāng)前幀的屬性值。

（5-3）拷貝關(guān)鍵幀

在編輯關(guān)鍵幀的時(shí)候，可以從組件的關(guān)鍵幀軌道復(fù)制關(guān)鍵幀，并將它們粘貼到另一個(gè)組件的關(guān)鍵幀軌道上。

右鍵單擊組件ID并在上下文菜單中選擇Copy All Keyframes，右鍵單擊另一個(gè)組件ID，并在上下文菜單中選擇Paste Keyframes，通過(guò)上述兩個(gè)步驟即可復(fù)制所有關(guān)鍵幀。

（5-4）刪除關(guān)鍵幀

右鍵單擊想要?jiǎng)h除的關(guān)鍵幀，在上下文菜單中選擇“Delete Keyframe”即可刪除關(guān)鍵幀。

如果需要從所選組件中刪除所有關(guān)鍵幀，需要在時(shí)間線中右鍵單擊組件名稱(chēng)，并在上下文菜單中選擇“Delete All Keyframes”。

要預(yù)覽設(shè)計(jì)的動(dòng)畫(huà)，在Timeline視圖中執(zhí)行以下操作之一即可：（1）沿著時(shí)間線拖動(dòng)播放頭。（2）選擇播放按鈕或按下空格鍵（Space）。

如果需要預(yù)覽完整的UI，選擇畫(huà)布工具欄上的(Show Live Preview)按鈕或按Alt+P。

總結(jié)

對(duì)于時(shí)間線動(dòng)畫(huà)，本質(zhì)上是插值動(dòng)畫(huà)，不會(huì)將屬性立即就更改為目標(biāo)值，而是由插值來(lái)驅(qū)動(dòng)，而且可以選擇動(dòng)畫(huà)曲線，來(lái)控制動(dòng)畫(huà)的插值方式。（選中關(guān)鍵幀，右鍵單擊彈出上下文菜單，選擇“Edit Easing Curve”編輯動(dòng)畫(huà)曲線）：

審核編輯：劉清