使用 NumberAnimation 和 Behavior 制作动画

Question

我试图通过在属性变化时对小矩形进行动画处理来理解 Behavior 的功能。考虑以下示例：

import QtQuick 2.4
import QtQuick.Controls 1.2

Item {
    width: 600
    height: 80

    Rectangle {
        id: rect
        color: "red"
        width: 20
        height: 20

        property int xval: 0

        Behavior on xval {
            NumberAnimation {
                target: rect
                property: "x"
                to: rect.xval
                duration: 2000
                easing.type: Easing.InOutQuad
            }
        }
    }

    Button {
        anchors.bottom: parent.bottom
        onClicked: { rect.xval=250 }
    }
}

在这里，我尝试在单击按钮时为项目 rect 的 x 属性设置动画。但它没有动画。现在，如果您替换

to: rect.xval

和

to: 400

矩形在单击按钮时按预期进行动画处理。我想要做的就是使用用户设置的值为 Rectangle 设置动画。我错过了什么吗？

Answer 1

您不需要额外的属性来制作属性的动画。 Behavior on foo 将在 foo 更改其值时对其进行动画处理，并使其成为内部动画的隐式属性。您的代码可以简单地是

Item {
    width: 600
    height: 80

    Rectangle {
        id: rect
        color: "red"
        width: 20
        height: 20

        Behavior on x {
            NumberAnimation {
                duration: 2000
                easing.type: Easing.InOutQuad
            }
        }
    }

    Button {
        anchors.bottom: parent.bottom
        onClicked: { rect.x=250 }
    }
}

使用 NumberAnimation 和 Behavior 制作动画

Animating using NumberAnimation and Behavior

qml