属性的动画问题

Question

为什么在第一种情况下左侧的动画不起作用？

qmlonline.

如果你转到第二种情况并用 when 注释掉代码，那么动画就会起作用。如果禁用顺序动画也会出现同样的问题。

这是第一个没有动画的情况

这是动画的第二种情况

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: root

    property int type: 0

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

    MouseArea {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 50
        height: 50
        Rectangle { anchors.fill: parent; color: "blue" }

        onClicked: {
            root.type = !root.type
//            stG.state = root.type ? "right" : "left"  // uncomment to the second case
        }
    }

    Rectangle {
        id: switcher1

        width: 50
        height: 50
        color: "red"
        anchors.verticalCenter: parent.verticalCenter
    }
    Rectangle {
        id: switcher2

        width: 50
        height: 50
        color: "green"
        anchors.top: switcher1.bottom
        anchors.topMargin: 10
    }

    StateGroup {
        id: stG
        states: [
            State {
                name: "left"
                when: type === 0 // comment to the second case
                PropertyChanges {
                    target: switcher1
                    x: 0
                }
                PropertyChanges {
                    target: switcher2
                    x: 0
                }
            },
            State {
                name: "right"
                when: type === 1 // comment to the second case
                PropertyChanges {
                    target: switcher1
                    x: root.width - switcher1.width
                }
                PropertyChanges {
                    target: switcher2
                    x: root.width - switcher2.width
                }
            }
        ]
        transitions: [
            Transition {
                to: "left"
                SequentialAnimation {
                    NumberAnimation {
                        target: switcher2
                        property: "x"
                        duration: 500
                    }
                    NumberAnimation {
                        target: switcher1
                        property: "x"
                        duration: 500
                    }
                }
            },
            Transition {
                to: "right"
                SequentialAnimation {
                    NumberAnimation {
                        target: switcher1
                        property: "x"
                        duration: 500
                    }
                    NumberAnimation {
                        target: switcher2
                        property: "x"
                        duration: 500
                    }
                }
            }
        ]
    }
}

够了

Answer 1

我可以给你一个解决问题的方法，但实际上感觉这里可能存在 Qt 的错误。

我尝试添加一个打印输出来显示 Qt 认为它处于什么状态：

        onStateChanged:
        {
            console.log("state: " + stG.state);
        }

我得到的输出是这样的：

// First click
> state: right

// Second click
> state:
> state: left

所以，似乎正在发生的事情是，在一瞬间，该状态进入了一些不存在的状态，并将您的 x 值重置为 0，而不使用转换。然后应用了正确的状态，但我们看不到转换，因为一切都已经是 0。也许比我更聪明的人可以帮助弄清楚为什么我们首先切换到错误状态。

谢天谢地，有一个足够简单的修复方法。如果您使“正确的”转换可逆，那么它会按预期工作。

            Transition {
                to: "right"
                reversible: true
                ...
            }