引言

接上文：QML 屬性動畫、行為動畫與預定義動畫。本文繼續通過QML示例，介紹兩種動畫（順序動畫SequentialAnimation和并行動畫ParallelAnimation）如何使用，并附帶完整的示例代碼。

相關閱讀

• ParallelAnimation官方文檔
• SequentialAnimation官方文檔

基礎屬性說明

屬性	類型	說明
target	Object	動畫作用的目標對象
property	string	需要動畫化的屬性名稱
duration	int	動畫持續時間（毫秒）
easing.type	enumeration	緩動曲線類型（如Easing.InOutQuad）
running	bool	控制動畫運行狀態

工程結構

qml_animation/
├── CMakeLists.txt
├── Main.qml          # 主界面
├── ControlledAnimation.qml      # 手動控制動畫
├── SequentialAnimationDemo.qml  # 順序動畫示例
├── ParallelAnimationDemo.qml    # 并行動畫示例
├── images.qrc        # 資源文件
└── main.cpp          # 程序入口

---

示例代碼解析

示例1：手動控制動畫（ControlledAnimation.qml）

import QtQuick
import QtQuick.ControlsRectangle {width: 400height: 400AnimatedImage {id: controlImgsource: "qrc:/images/huaji.gif"x: 0y: 150width: 100height: 100}NumberAnimation {id: controlledAnimtarget: controlImgproperty: "x"from: 0to: 300duration: 1500}Row {anchors.bottom: parent.bottomspacing: 10Button {text: "開始"onClicked: controlledAnim.start()}Button {text: "暫停"onClicked: controlledAnim.pause()}Button {text: "恢復"onClicked: controlledAnim.resume()}Button {text: "停止"onClicked: controlledAnim.stop()}Button {text: "重啟"onClicked: controlledAnim.restart()}}
}

代碼說明：

這段代碼通過組合使用 QML 的各種元素和控件，實現了對一個表情包移動動畫的控制功能，用戶可以通過點擊不同的按鈕來控制表情包的移動動畫的開始、暫停、恢復、停止和重啟。

其中NumberAnimation用于控制表情包的水平移動。設置了動畫的目標對象（target）為 controlImg（即前面定義的表情包動態圖），要控制的屬性（property）為 “x”（水平坐標）。動畫的起始位置（from）為 0，結束位置（to）為 300 像素，動畫持續時間（duration）為 1500 毫秒。

運行效果：

---

示例2：順序動畫（SequentialAnimationDemo.qml）

import QtQuick
import QtQuick.ControlsRectangle {width: 400height: 400SequentialAnimation {id: seqAnimationrunning: falseNumberAnimation { target: rect1; property: "rotation"; from: 0; to: 315; duration: 500 }NumberAnimation { target: rect2; property: "rotation"; from: 0; to: 315; duration: 500 }NumberAnimation { target: rect3; property: "rotation"; from: 0; to: 315; duration: 500 }}Row {spacing: 20anchors.centerIn: parentRectangle {id: rect1width: 80height: 80color: "pink"}Rectangle {id: rect2width: 80height: 80color: "cyan"}Rectangle {id: rect3width: 80height: 80color: "lime"}}Button {text: "啟動動畫"anchors.bottom: parent.bottomonClicked: {seqAnimation.start()}}
}

代碼說明：

這段代碼通過組合使用 QML 的各種元素和控件，實現了三個彩色矩形的旋轉動畫效果，并通過按鈕來控制動畫的啟動。用戶點擊 “啟動動畫” 按鈕后，三個矩形會按照預先定義的動畫序列依次旋轉。

SequentialAnimation用于定義一個動畫序列，動畫會按照添加的順序依次執行。設置了動畫序列的初始狀態為不運行（running: false）。
定義了三個NumberAnimation元素，每個動畫都控制一個矩形（rect1、rect2、rect3）的旋轉屬性（rotation），起始角度為 0，結束角度為 315 度，動畫持續時間均為 500 毫秒。

運行效果：

---

示例3：并行動畫（ParallelAnimationDemo.qml）

import QtQuick
import QtQuick.ControlsRectangle {width: 400height: 400ParallelAnimation {id: palAnimationrunning: falseNumberAnimation { target: rect1; property: "rotation"; from: 0; to: 315; duration: 500 }NumberAnimation { target: rect2; property: "rotation"; from: 0; to: 315; duration: 500 }NumberAnimation { target: rect3; property: "rotation"; from: 0; to: 315; duration: 500 }}Row {spacing: 20anchors.centerIn: parentRectangle {id: rect1width: 80height: 80color: "pink"}Rectangle {id: rect2width: 80height: 80color: "cyan"}Rectangle {id: rect3width: 80height: 80color: "lime"}}Button {text: "啟動動畫"anchors.bottom: parent.bottomonClicked: {palAnimation.start()}}
}

代碼說明：

運行效果：

---

總結

通過本文中的三個示例，進行如下總結：

• 手動控制動畫適合需要精確控制動畫生命周期的場景
• 順序動畫適用于需要分步執行的動畫序列
• 并行動畫可提升多個動畫元素的協同表現力

工程下載

Gitcode項目地址：GitCode -> QML 動畫示例

在之前的項目上增加了3個示例，實現了一個主界面（main.qml），基于swipeview為容器，展示6個示例。