qml分组动画

这里介绍2种分组动画，一种是顺序执行（SequentialAnimation），即：若其中放有若干个子动画，则执行完第一个然后继续执行第二个以此类推。

还有一种是并行执行（ParallelAnimation），即：若其中放有若干个子动画，则不分先后顺序，一起同步执行。

下面看一个例子，目标：飞机从左下角待命，当我们点击飞机图片时，飞机立即开始飞行，从从左下角飞到左上角，掉头然后从左上角飞到右上角，掉头然后从右上角飞到右下角，掉头然后从右下角飞到左下角，最后掉头回到初始位置，再次点击飞机，则会再飞行一圈。

main.qml 

import QtQuick

Window {
    id: root
    width: 640
    height: 480
    visible: true
    title: qsTr("分组动画演示")

    Fly {
        id: fly
        source: "image/飞机.png"
        x: 70
        y: 400

        onClicked: sam.restart()
    }

    property int duration: 3000

    // 顺序执行动画，而ParallelAnimation是并行执行动画
    SequentialAnimation {
        id: sam

        // 飞机从左下角移动到左上角
        NumberAnimation {
            target: fly //指定是上面的飞机图片
            properties: "y" //目标值是y
            from: 400
            to: 80
            duration: root.duration
        }


        NumberAnimation {
            target: fly
            property: "rotation"
            duration: root.duration
            from: 0
            to: 90
        }

        NumberAnimation {
            target: fly
            property: "x"
            duration: root.duration
            from: 70
            to: 500
        }

        NumberAnimation {
            target: fly
            property: "rotation"
            duration: root.duration
            from: 90
            to: 180
        }

        NumberAnimation {
            target: fly
            properties: "y"
            from: 80
            to: 400
            duration: root.duration
        }

        NumberAnimation {
            target: fly
            property: "rotation"
            duration: root.duration
            from: 180
            to: 270
        }

        NumberAnimation {
            target: fly
            property: "x"
            duration: root.duration
            from: 500
            to: 70
        }

        NumberAnimation {
            target: fly
            property: "rotation"
            duration: root.duration
            from: 270
            to: 360
        }

        //重置飞机的位置，让飞机回到起始位置
        ScriptAction {
            script: {
                fly.x = 70
                fly.y = 400
                fly.rotation = 0
            }
        }
    }

    // Text {
    //     id: fly_state
    //     text: qsTr("准备起飞")
    //     font.pixelSize: 16
    //     anchors.centerIn: parent
    // }

    // PropertyAnimation {
    //     target: fly_state
    //     property: "text"
    //     to: "飞机正在向前飞行…"
    //     duration: root.duration
    // }
}

Fly.qml

import QtQuick

Item {
    id: root

    property alias source: fly.source //图片路径开放
    // property alias fly_state: fly_state.text
    signal clicked

    Image {
        id: fly

        MouseArea {
            anchors.fill: parent
            onClicked: root.clicked()
        }
    }
}

 这里我想着飞机在飞行时，程序框中心也会实时更新出文字，用于描述飞机目前飞行的状态，但是没有尝试成功，暂不在目前知识范围内。。。。后面我会回来加上，嘿嘿！