当前位置：首页 > news >正文

QML动画--ParallelAnimation和SequentialAnimation

news 来源：原创 2025/4/20 18:41:13

一、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 }}
}

注意事项

所有子动画会同时开始执行
整体动画持续时间等于最长子动画的持续时间
可以通过 animations 属性或 addAnimation() 方法添加子动画
可以嵌套使用 SequentialAnimation 创建复杂动画序列
子动画的 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 }
}