Animation 组合多个QML行为

我希望在x和/或y发生变化时平滑地设置对象的动画。我让它工作（如下所示），但我不知道如何组合x和y行为，所以我创建了两个行为

现在，我想在整个动画完成时（x和/或y）发出一个信号。我可以创建两个标志，并在发出完成的信号时对这两个标志进行测试。但是，如果只有一维动画，我将永远等待第二个信号

有没有简单的解决办法？（否则，如果x或y实际发生变化，我必须通过预检查来预设标志）

---

您可以使用继承自的所有类中存在的标志

running

，来完成此任务。使用第三个布尔属性将两个动画的运行状态绑定在一起。这将告诉我们何时两者都停止了。下面是一个完整的工作示例，源于您的示例-按钮使

矩形

在一个或两个轴上移动，并且在设置动画时颜色将改变，以及在两个动画完成时记录：

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

Window {
    id: applicationWindow
    width: 640
    height: 480
    visible: true

    Rectangle {
        id: rect
        color: animationRunning ? "blue" : "red"
        width: 100
        height: 100

        // if either animation is running (or both), this is true
        // false only when neither animation is running
        property bool animationRunning: xAnim.running || yAnim.running

        onAnimationRunningChanged: {
            if (animationRunning === false) {
                console.log("ANIMATION COMPLETE")
            }
        }

        Behavior on x {
            enabled: true
            NumberAnimation {
                id: xAnim
                duration: 500
                easing.type: Easing.InOutQuad
            }
        }

        Behavior on y {
            enabled: true
            NumberAnimation {
                id: yAnim
                duration: 500
                easing.type: Easing.InOutQuad
            }
        }
    }

    Row { // controls for visually testing/verifying logic
        Button {
            text: "move X"
            onClicked: rect.x = Math.random()* parent.width
        }
        Button {
            text: "move Y"
            onClicked: rect.y = Math.random()* parent.height
        }
        Button {
            text: "move Both"
            onClicked: {
                rect.y = Math.random()* parent.height
                rect.x = Math.random()* parent.width
            }
        }
    }
}

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

Window {
    id: applicationWindow
    width: 640
    height: 480
    visible: true

    Rectangle {
        id: rect
        color: animationRunning ? "blue" : "red"
        width: 100
        height: 100

        // if either animation is running (or both), this is true
        // false only when neither animation is running
        property bool animationRunning: xAnim.running || yAnim.running

        onAnimationRunningChanged: {
            if (animationRunning === false) {
                console.log("ANIMATION COMPLETE")
            }
        }

        Behavior on x {
            enabled: true
            NumberAnimation {
                id: xAnim
                duration: 500
                easing.type: Easing.InOutQuad
            }
        }

        Behavior on y {
            enabled: true
            NumberAnimation {
                id: yAnim
                duration: 500
                easing.type: Easing.InOutQuad
            }
        }
    }

    Row { // controls for visually testing/verifying logic
        Button {
            text: "move X"
            onClicked: rect.x = Math.random()* parent.width
        }
        Button {
            text: "move Y"
            onClicked: rect.y = Math.random()* parent.height
        }
        Button {
            text: "move Both"
            onClicked: {
                rect.y = Math.random()* parent.height
                rect.x = Math.random()* parent.width
            }
        }
    }
}