Roson的Qt之旅#47 QML序列动画SequentialAnimation

短命女 2022-09-14 11:09 145阅读 0赞

# 1.继承关系 #

父类：Animation

子类：无

# 2.详细说明 #

SequentialAnimation和ParallelAnimation类型允许多个动画一起运行。SequentialAnimation中定义的动画会一个接一个地运行，而ParallelAnimation中定义的动画会同时运行。  
下面的例子在一个序列中运行两个数字动画。矩形动画的x位置为50，然后y位置为50。

import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Rectangle {
            id: rect
            width: 100; height: 100
            color: "red"
    
            SequentialAnimation {
                running: true
                NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
                NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
            }
        }
    }

![f0b037f6349f4b19aeade09f54f1bf76.gif][]

在Transition中定义的动画会自动并行运行，所以如果这是首选的行为，则可以使用SequentialAnimation将动画包围在Transition中。

与任何其他动画类型一样，SequentialAnimation可以以多种方式应用，包括转换、行为和属性值源。Qt Quick文档中的动画和过渡显示了创建动画的各种方法。

注意:一旦一个动画被分组为SequentialAnimation或ParallelAnimation，它就不能单独启动和停止;SequentialAnimation或ParallelAnimation必须作为一个组启动和停止。

更多信息请查阅ParallelAnimation, Animation and Transitions in Qt Quick, and Qt Quick Examples - Animation。

[f0b037f6349f4b19aeade09f54f1bf76.gif]: /images/20220828/6d92b498733a476cb29a8dfa7e440142.png