Question

我试图通过在一个小的Rectangle属性发生变化时设置动画来理解行为的功能。请考虑以下示例：

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 }
    }
}

我试图在Button Click上设置Item rect 的 x 属性的动画。但它没有动画。现在，如果你替换

to: rect.xval

与

to: 400

Rectangle在按钮单击时按预期动画。我想要做的就是使用用户设置的值为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进行动画制作

1 个答案: