Qml 动画数值联动示例

import QtQuick 2.12
import QtQuick.Window 2.12

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
            }

            MouseArea {
                anchors.fill: parent

                onClicked: {
                    rect1.visible = false
                    rect3.visible = false

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

        }

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

    }

}