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

一、創(chuàng)建動畫

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

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

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

（2）在Timeline Settings標簽中：

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

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

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

（3）在Animation Setting標簽中：

在Animation ID字段中，鍵入ID描述一個動畫。

選中“Running in Base State”復選框以在應用基本狀態(tài)時運行動畫。

在Start frame字段中，設置動畫的第一幀。

在End frame字段中，設置動畫的最后一幀。

在Duration字段中，以毫秒為單位設置動畫的長度。

選擇“Continues”復選框可以無限循環(huán)動畫（該選項為可選項）。

選中“Ping pong”復選框可在動畫結束時將其向后播放到開始，即表示一種反彈效果（該選項為可選項）。

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

（4）選擇Close關閉對話框并保存設置。

到目前為止，我們已經創(chuàng)建了Timeline和動畫，然后我們可以為屬性設置動畫的關鍵幀了。

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

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

（1）在Timeline視圖中，打開Timeline Settings對話框。

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

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

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

二、設置關鍵幀值

當我們在創(chuàng)建時間線時，Qt Design Studio將會為時間線創(chuàng)建一個動畫。在實際開發(fā)中，我們也可以為一個時間線創(chuàng)建多個動畫。例如，可以創(chuàng)建動畫來運行時間軸的一小段或反向運行時間線。

要動畫Timeline視圖中的組件，我們需要為動畫的屬性設置關鍵幀值。Qt Design Studio會自動在兩個關鍵幀之間添加插值，并均勻地設置它們的值。

為一個組件的屬性設置關鍵幀值，步驟如下：

（1）在Navigate視圖中，選擇需要動畫的組件。

（2）在Properties視圖中，選擇Action->Insert Keyframe為想要動畫的屬性插入關鍵幀。如下圖所示：

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

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

（5）將時間線上的播放頭移動到另一幀并指定該幀上的屬性值。

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

三、將時間線綁定到屬性

當我們將時間線綁定到組件屬性時，動畫的當前幀由該屬性的值控制。

假如有這樣一個示例：將時間軸綁定到slider組件，時間軸上的動畫通過slider的滑動值來確定。

其時間線和關鍵幀設置步驟如下：

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

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

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

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

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

我們可以將動畫綁定到狀態(tài)，這意味著當進入狀態(tài)時，動畫會自動運行。

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

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

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

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

如果想要在不運行動畫的情況下將狀態(tài)綁定到動畫中的某個關鍵幀，需在Fixed Frame字段中設置關鍵幀：

五、管理關鍵幀

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

（5-1）編輯關鍵幀

要刪除屬性更改記錄，在時間軸線右鍵單擊屬性名稱并選擇“Remove Property”即可：

要在當前的播放幀上向組件的關鍵幀軌道添加關鍵幀，在時間線上右鍵單擊組件名稱并選擇“Add Keyframes at Current Frame”即可。

（5-2）編輯關鍵幀的值

如果我們需要微調關鍵幀的值，可以雙擊關鍵幀標記或右鍵單擊菜單，在彈出菜單中選擇“Edit Keyframe”。

“Edit Keyframe”對話框中，顯示了當前幀動畫的屬性以及當前幀的屬性值。

（5-3）拷貝關鍵幀

在編輯關鍵幀的時候，可以從組件的關鍵幀軌道復制關鍵幀，并將它們粘貼到另一個組件的關鍵幀軌道上。

右鍵單擊組件ID并在上下文菜單中選擇Copy All Keyframes，右鍵單擊另一個組件ID，并在上下文菜單中選擇Paste Keyframes，通過上述兩個步驟即可復制所有關鍵幀。

（5-4）刪除關鍵幀

右鍵單擊想要刪除的關鍵幀，在上下文菜單中選擇“Delete Keyframe”即可刪除關鍵幀。

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

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

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

總結

對于時間線動畫，本質上是插值動畫，不會將屬性立即就更改為目標值，而是由插值來驅動，而且可以選擇動畫曲線，來控制動畫的插值方式。（選中關鍵幀，右鍵單擊彈出上下文菜單，選擇“Edit Easing Curve”編輯動畫曲線）：

審核編輯：劉清