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

一、創建動畫

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

（1-1）創建時間軸

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

（2）在Timeline Settings標簽中：

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

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

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

（3）在Animation Setting標簽中：

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

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

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

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

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

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

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

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

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

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

（1-2）創建多條時間線

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

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

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

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

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

二、設置關鍵幀值

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

要動畫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綁定表達式。如下圖所示：

四、將動畫綁定到狀態

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

將動畫綁定到狀態的步驟如下：

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

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

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

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

五、管理關鍵幀

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

（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視圖中執行以下操作之一即可：（1）沿著時間線拖動播放頭。（2）選擇播放按鈕或按下空格鍵（Space）。

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

總結

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

審核編輯：劉清