qml SequentialAnimation详解

1、概述

SequentialAnimation 是 Qt Quick 中的一个动画类，用于按顺序依次执行多个动画。它继承自 Animation 类，可以将多个动画组合成一个序列，并确保每个动画按顺序执行。SequentialAnimation 是管理和控制多个动画执行顺序的理想选择，适用于需要多个动画按特定顺序执行的场景，如平移、旋转、缩放等效果的组合。

SequentialAnimation 的主要特点是：

顺序执行：确保一组动画按顺序执行，每个动画的完成触发下一个动画的开始。
支持多种动画类型：它可以包含多种类型的动画（例如 NumberAnimation、RotationAnimation、OpacityAnimation 等）。
灵活控制：允许设置动画的持续时间、循环次数、延迟等属性。

2、重要属性

animations (list of Animation)
- 一个包含动画对象的列表，定义了在 SequentialAnimation 中依次执行的动画。可以通过这个属性添加多个动画，按照它们的顺序逐个执行。
running (bool)
- 当前动画序列是否正在运行。如果为 true，则动画正在执行。如果为 false，则动画序列处于停止状态。
loops (int)
- 设置动画循环的次数。-1 表示无限循环，0 表示不循环，1 表示仅执行一次，默认值是 1。
currentIndex (int, read-only)
- 当前正在执行的动画在 animations 列表中的索引。这个属性只读，表示当前动画在序列中的位置。
autoReverse (bool)
- 控制序列动画是否自动反向执行。当设置为 true 时，所有的动画会在结束后反向执行。默认值为 false。
duration (int)
- 动画序列的总持续时间。即所有动画完成的总时间。如果没有设置，SequentialAnimation 会自动使用每个动画的单独时长。

3、重要方法

start()
- 启动动画序列，按顺序开始执行其中的动画。调用此方法后，SequentialAnimation 会开始执行列表中的动画，并依次按顺序触发。
stop()
- 停止当前的动画序列。调用此方法会终止动画序列的执行，并将所有动画重置为初始状态。
pause()
- 暂停当前动画序列的执行，保留当前状态，等待恢复。
resume()
- 恢复暂停的动画序列，使其从暂停的位置继续执行。
clear()
- 清除当前动画序列中的所有动画。调用此方法后，animations 列表会被清空，可以重新添加新的动画。

4、重要信号

started()
- 当动画序列开始时触发。这个信号表示 SequentialAnimation 已经开始执行第一个动画。
finished()
- 当动画序列完成时触发。此信号在所有动画执行完毕后触发。
runningChanged()
- 当 running 属性发生变化时触发。可以用来监听动画序列的运行状态变化，例如从正在运行到停止，或者从暂停到恢复等。
currentIndexChanged(int)
- 当当前动画索引发生变化时触发。每次动画完成时，currentIndex 属性会更新，表示下一个正在执行的动画。
paused()
- 当动画序列被暂停时触发。可以用来监听序列暂停的状态。

5、常用枚举类型

SequentialAnimation 本身没有特别多的枚举类型，常用的枚举类型通常来自它所包含的具体动画类型。以下是一些常见的枚举类型，通常与其他动画类一起使用：

Easing (e.g., Easing.Linear, Easing.InOutQuad, Easing.InOutCubic)
- 控制动画的缓动效果，可以用于 SequentialAnimation 中的每个动画。通过设置缓动类型，可以使动画的过渡效果更加平滑。
Animation.Infinite
- 用于指定动画循环的次数。当循环次数为 -1 时，表示无限循环。

import QtQuick 2.14
import QtQuick.Window 2.12
import QtQuick.Controls 2.14

Window {
    visible: true
    width: 640
    height: 480
    title: "SequentialAnimation 示例"

    Rectangle {
        id: rect
        width: 100
        height: 100
        color: "red"
        x: 50
        y: 50

        SequentialAnimation on x {
            id: sequentialAnimation
            loops: Animation.Infinite

            NumberAnimation {
                from: 50
                to: 540
                duration: 2000
                easing.type: Easing.InOutQuad

                onStarted: console.log("X 动画1 开始")
                onStopped: console.log("X 动画1 停止")
                onFinished: console.log("X 动画1 完成")
            }

            PauseAnimation {
                duration: 1000

                onStarted: console.log("暂停1 开始")
                onStopped: console.log("暂停1 停止")
                onFinished: console.log("暂停1 完成")
            }

            NumberAnimation {
                from: 540
                to: 50
                duration: 2000
                easing.type: Easing.InOutQuad

                onStarted: console.log("X 动画2 开始")
                onStopped: console.log("X 动画2 停止")
                onFinished: console.log("X 动画2 完成")
            }

            PauseAnimation {
                duration: 1000

                onStarted: console.log("暂停2 开始")
                onStopped: console.log("暂停2 停止")
                onFinished: console.log("暂停2 完成")
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (sequentialAnimation.running) {
                    sequentialAnimation.pause()
                } else {
                    sequentialAnimation.resume()
                }
            }
        }
    }

    Rectangle {
        id: controlRect
        width: 150
        height: 50
        color: "green"
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter

        Text {
            text: "点击暂停/恢复动画"
            anchors.centerIn: parent
            color: "white"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (sequentialAnimation.running) {
                    sequentialAnimation.stop()
                } else {
                    sequentialAnimation.start()
                }
            }
        }
    }
}

觉得有帮助的话，打赏一下呗。。