QML动画--ParallelAnimation和SequentialAnimation

一、ParallelAnimation

ParallelAnimation 是 QML 中用于并行执行多个动画的容器动画类型，可以同时运行多个子动画。

基本用法

qml

复制代码

import QtQuick 2.15

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"
    x: 0; y: 0; opacity: 1.0
    
    ParallelAnimation {
        running: true
        NumberAnimation { 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: parallelAnim
    NumberAnimation { 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.15

Rectangle {
    id: rect
    width: 100; height: 100
    color: "red"
    x: 0; y: 0
    
    SequentialAnimation {
        running: true
        NumberAnimation { 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: seqAnim
    NumberAnimation { 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 }
}

注意事项

子动画会按照添加顺序依次执行
整体动画持续时间等于所有子动画持续时间之和
可以通过 currentAnimation 属性获取当前运行的子动画
使用 jumpTo() 方法可以跳过某些动画
可以嵌套 ParallelAnimation 创建复杂的动画组合