一、ParallelAnimation

ParallelAnimation?是 QML 中用于并行執行多個動畫的容器動畫類型，可以同時運行多個子動畫。

基本用法

qml

import QtQuick 2.15Rectangle {id: rectwidth: 100; height: 100color: "red"x: 0; y: 0; opacity: 1.0ParallelAnimation {running: trueNumberAnimation { target: rect; property: "x"; to: 200; duration: 1000 }NumberAnimation { target: rect; property: "y"; to: 200; duration: 1500 }PropertyAnimation { target: rect; property: "opacity"; to: 0.5; duration: 800 }}
}

主要屬性

屬性	類型	描述	默認值
animations	list<Animation>	子動畫列表	空列表
running	bool	是否運行	false
loops	int	循環次數	1
alwaysRunToEnd	bool	停止時是否完成	false

方法

方法	參數	描述
start()	-	開始所有子動畫
stop()	-	停止所有子動畫
restart()	-	重新開始所有子動畫
pause()	-	暫停所有子動畫
resume()	-	恢復所有子動畫
addAnimation(animation)	Animation	添加子動畫
removeAnimation(animation)	Animation	移除子動畫
clearAnimations()	-	清除所有子動畫

信號

信號	描述
started()	所有子動畫開始時觸發
stopped()	所有子動畫停止時觸發
finished()	所有子動畫完成時觸發
paused()	所有子動畫暫停時觸發
resumed()	所有子動畫恢復時觸發

使用示例

1. 基本并行動畫

qml

ParallelAnimation {id: parallelAnimNumberAnimation { property: "x"; to: 300; duration: 1000 }NumberAnimation { property: "y"; to: 300; duration: 1000 }RotationAnimation { target: rotation; to: 360; duration: 1000 }
}

2. 動態添加動畫

qml

ParallelAnimation {id: dynamicAnim
}// 動態添加動畫
function addScaleAnimation() {var anim = Qt.createQmlObject('import QtQuick 2.15; NumberAnimation { property: "scale"; to: 2.0; duration: 500 }', dynamicAnim);dynamicAnim.addAnimation(anim);
}

3. 組合動畫序列

qml

SequentialAnimation {// 第一階段：并行移動和旋轉ParallelAnimation {NumberAnimation { property: "x"; to: 200 }RotationAnimation { target: rotation; to: 90 }}// 第二階段：并行改變顏色和大小ParallelAnimation {ColorAnimation { property: "color"; to: "blue" }NumberAnimation { property: "width"; to: 150 }}
}

注意事項

1. 所有子動畫會同時開始執行

2. 整體動畫持續時間等于最長子動畫的持續時間

3. 可以通過?animations?屬性或?addAnimation()?方法添加子動畫

4. 可以嵌套使用 SequentialAnimation 創建復雜動畫序列

5. 子動畫的?running?屬性會被 ParallelAnimation 控制

二、SequentialAnimation

SequentialAnimation?是 QML 中用于順序執行多個動畫的容器動畫類型，可以按順序依次運行多個子動畫。

基本用法

qml

import QtQuick 2.15Rectangle {id: rectwidth: 100; height: 100color: "red"x: 0; y: 0SequentialAnimation {running: trueNumberAnimation { target: rect; property: "x"; to: 200; duration: 1000 }NumberAnimation { target: rect; property: "y"; to: 200; duration: 1000 }ColorAnimation { target: rect; property: "color"; to: "blue"; duration: 500 }}
}

主要屬性

屬性	類型	描述	默認值
animations	list<Animation>	子動畫列表	空列表
running	bool	是否運行	false
loops	int	循環次數	1
alwaysRunToEnd	bool	停止時是否完成當前動畫	false
currentAnimation	Animation	當前正在運行的子動畫	null

方法

方法	參數	描述
start()	-	開始動畫序列
stop()	-	停止動畫序列
restart()	-	重新開始動畫序列
pause()	-	暫停當前動畫
resume()	-	恢復暫停的動畫
addAnimation(animation)	Animation	添加子動畫
removeAnimation(animation)	Animation	移除子動畫
clearAnimations()	-	清除所有子動畫
jumpTo(index)	int	跳轉到指定索引的動畫

信號

信號	描述
started()	動畫序列開始時觸發
stopped()	動畫序列停止時觸發
finished()	動畫序列完成時觸發
paused()	動畫序列暫停時觸發
resumed()	動畫序列恢復時觸發
currentAnimationChanged()	當前運行的子動畫改變時觸發

使用示例

1. 基本順序動畫

qml

SequentialAnimation {id: seqAnimNumberAnimation { property: "x"; to: 100; duration: 500 }NumberAnimation { property: "y"; to: 100; duration: 500 }PauseAnimation { duration: 200 } // 暫停200毫秒RotationAnimation { target: rotation; to: 360; duration: 1000 }
}

2. 動態控制動畫序列

qml

SequentialAnimation {id: dynamicSeqAnim
}// 動態添加動畫
function buildAnimation() {dynamicSeqAnim.clearAnimations();dynamicSeqAnim.addAnimation(createAnim("x", 200));dynamicSeqAnim.addAnimation(createAnim("y", 200));
}function createAnim(prop, toValue) {return Qt.createQmlObject(`import QtQuick 2.15; NumberAnimation { property: "${prop}"; to: ${toValue}; duration: 500 }`,dynamicSeqAnim);
}

3. 嵌套組合動畫

qml

SequentialAnimation {// 第一階段：并行移動和旋轉ParallelAnimation {NumberAnimation { property: "x"; to: 200 }RotationAnimation { target: rotation; to: 90 }}// 第二階段：順序改變顏色和大小SequentialAnimation {ColorAnimation { property: "color"; to: "blue" }NumberAnimation { property: "width"; to: 150 }}
}

特殊用法

1. 使用 PauseAnimation 添加延遲

qml

SequentialAnimation {NumberAnimation { property: "opacity"; to: 0; duration: 300 }PauseAnimation { duration: 500 } // 暫停500毫秒NumberAnimation { property: "opacity"; to: 1; duration: 300 }
}

2. 循環動畫序列

qml

SequentialAnimation {loops: Animation.Infinite // 無限循環NumberAnimation { property: "x"; to: 200; duration: 1000 }NumberAnimation { property: "x"; to: 0; duration: 1000 }
}

注意事項

1. 子動畫會按照添加順序依次執行

2. 整體動畫持續時間等于所有子動畫持續時間之和

3. 可以通過?currentAnimation?屬性獲取當前運行的子動畫

4. 使用?jumpTo()?方法可以跳過某些動畫

5. 可以嵌套 ParallelAnimation 創建復雜的動畫組合