在QML動(dòng)畫設(shè)計(jì)中通過指定關(guān)鍵幀創(chuàng)建時(shí)間線動(dòng)畫

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

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

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

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

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

（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)畫。

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

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

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

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

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

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

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

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

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

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

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

（1）在Timeline視圖中，打開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)畫。在實(shí)際開發(fā)中，我們也可以為一個(gè)時(shí)間線創(chuàng)建多個(gè)動(dòng)畫。例如，可以創(chuàng)建動(dòng)畫來運(yùn)行時(shí)間軸的一小段或反向運(yùn)行時(shí)間線。

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

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

（1）在Navigate視圖中，選擇需要?jiǎng)赢嫷慕M件。

（2）在Properties視圖中，選擇Action->Insert Keyframe為想要?jiǎng)赢嫷膶傩圆迦腙P(guān)鍵幀。如下圖所示：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

要在當(dāng)前的播放幀上向組件的關(guān)鍵幀軌道添加關(guān)鍵幀，在時(shí)間線上右鍵單擊組件名稱并選擇“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)畫的屬性以及當(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，通過上述兩個(gè)步驟即可復(fù)制所有關(guān)鍵幀。

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

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

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

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

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

總結(jié)

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

審核編輯：劉清