qml NumberAnimation 示例 2

import QtQuick 2.12
import QtQuick.Window 2.12
import QtCharts 2.3

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    Item {
        id: root
        anchors.fill: parent

        Rectangle {
            id: rect1
            x: 0
            y: 0
            height: parent.height
            width: parent.width / 3
            color: 'red'
        }

        Rectangle {
            id: rect2
            x: parent.width / 3
            y: 0
            height: parent.height
            width: parent.width / 3
            color: 'orange'

            // 宽度扩展到满屏的动画
            NumberAnimation on width {
                id: animation0
                to: root.width
                duration: 1000
                running: false
            }

            // x值逐渐减少为0
            NumberAnimation on x {
                id: animation1
                to: 0
                duration: 1000
                running: false
            }

            NumberAnimation on x {
                id: animation2
                to: root.width / 3
                duration: 1000
                running: false
            }


            NumberAnimation on width {
                id: animation3
                to: root.width / 3
                duration: 1000
                running: false

                onFinished: {
                    // 显示
                    rect1.visible = true
                    rect3.visible = true
                }

            }


            MouseArea {
                anchors.fill: parent
                anchors.bottomMargin: 185
                anchors.leftMargin: 52

                property bool flag: false
                onClicked: {
                    if (!flag) {
                        // 隐藏
                        rect1.visible = false
                        rect3.visible = false

                        // 同时运行两个动画，才能达到预期的效果
                        animation0.running = true
                        animation1.running = true
                    } else {
                        animation2.running = true
                        animation3.running = true
                    }
                    flag = !flag
                }
            }

        }

        Rectangle {
            id: rect3
            x: parent.width * 0.666
            y: 0
            height: parent.height
            width: parent.width / 3
            color: 'green'
        }

    }

}