为什么我的动画以一种奇怪的方式工作？

Question

我写了一个简单的动画演示，但是动画的运行方式很奇怪。

代码

import QtQuick 2.5
import QtQuick.Controls 2.12

ApplicationWindow {
    visible: true
    width: 480
    height: 680
    id: root

    Rectangle {
        id: rect
        width: 200
        height: 200
        color: "blue"
        anchors.centerIn: parent

        states: State {
            name: "A"
            when: mouseArea.pressed
            PropertyChanges {target: rect; color:"red"; }
            PropertyChanges {target: rect; width: rect.width + 100}
            PropertyChanges {target: rect; rotation: 720}
        }

        transitions: Transition {
            ColorAnimation {duration: 1000}
            NumberAnimation {duration: 1000}
            RotationAnimation {duration: 1000}
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

}

Q1: 当鼠标按住时，我想让矩形width每次增加100，但是我的代码好像不行？
Q2：如果width赋一个const值（如100），NumberAnimation好像不行，宽度马上变了？
Q3:RotationAnimation不是旋转720，旋转超过720？

目前不熟悉js&qml，希望好男人(女)能帮帮我。

Answer 1

Q1：您不应将 rect.width 绑定到自身。这会导致绑定循环。要么使用常量值，要么在矩形之外想出一些方法来跟踪您希望矩形的大小。

Q2：您需要告诉 NumberAnimation 要在哪个属性上设置动画。在这种情况下，它是“宽度”。

Q3：720度就是绕一圈的意思。这正是我在测试时看到的，所以我认为它工作正常。

下面的代码适合我。

    Rectangle {
        id: rect
        width: 200
        height: 200
        color: "blue"
        anchors.centerIn: parent

        states: State {
            name: "A"
            when: mouseArea.pressed
            PropertyChanges {target: rect; color:"red"; }
            PropertyChanges {target: rect; width: 300} // Fixed value
            PropertyChanges {target: rect; rotation: 720}
        }

        transitions: Transition {
            ColorAnimation {duration: 1000}
            NumberAnimation {property: "width"; duration: 1000} // Specify property
            RotationAnimation {duration: 1000}
        }
    }

Answer 2

除了 JarMan 的回答之外，我认为您想在 MouseArea 中定义一个 onPressed 处理程序，您可以在其中为矩形的宽度分配一个新值（注意区别在“绑定”和“分配”之间）：

MouseArea {
    id: mouseArea
    anchors.fill: parent

    onPressed: rect.width += 100
}

澄清为什么 PropertyChange 在 width 上不起作用：只要状态“A”处于活动状态（因此在鼠标按下期间），PropertyChange 会覆盖在原始 Rectangle 代码中绑定，并且您将其定义为绑定，这意味着在“A”状态期间，宽度绑定到自身（JarMan 所写的绑定循环）。当状态“A”不再处于活动状态时，它将 return 变为 width: 300 （这基本上也是一个绑定，尽管是常量）。

当您使用上面的 onPressed 处理程序时，width 属性将松开它的绑定并固定为分配给它的值。注意：您可以使用 Qt.binding 或暂时使用来自 State

的另一个 PropertyChanges 使其再次绑定

为什么我的动画以一种奇怪的方式工作？

Why my animations works in a strange way?

qt

qml