将宽度文本设置为NumberAnimation中随时间变化的值

Question

Rectangle {
    id: rect3
    width: 50
    height: 50
    x: 75
    y: 330
    color: "#FF4C3B"
    Text {
        id: text3
        x: 8
        y: 0
        width: 50
        height: 50
        color: "#FFFFFF"
        font.family: "Ubuntu"
        text: "►"
        font.pixelSize: 40
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                animation5.start()
                text3.text= "abcdefghijklmno"
                text3.width=animation5.width
            }
            onExited: {
                animation6.start()
                text3.text="►"
                text3.width=animation6.width
            }
            NumberAnimation {
                id: animation5
                target: rect3
                property: "width"
                to: 350;
                duration: 1000
            }
            NumberAnimation {
                id: animation6
                target: rect3
                property: "width"
                to: 50;
                duration: 1000
            }
        }
    }
}

我可以将文本的宽度设置为NumberAnimations中增加/减少的宽度吗？我希望文本使用矩形一次缩放大小。我认为text3.width=animation5.width函数中的onEntered和text3.width=animation6.width函数中的onExited会这样做，但它看起来并不像？有什么想法吗？

编辑：我还尝试为文字的宽度创建另一个NumberAction，但它仍然无法正常工作

Answer 1

如果动画的目标是矩形：

Rectangle {
    ...
    Text {
        ...
        width: parent.width
}

Answer 2

Rectangle {
id: rect3
width: 50
height: 50
x: 75
y: 330
color: "#FF4C3B"
Text {
    id: text3
    x: 8
    y: 0
    width: 50
    height: 50
    color: "#FFFFFF"
    font.family: "Ubuntu"
    text: "►"
    font.pixelSize: 40
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            animation5.start()
            text3.text= "abcdefghijklmno"
            textanim5.start()
        }
        onExited: {
            animation6.start()
            text3.text="►"
            textanim6.start()
        }
        NumberAnimation {
            id: animation5
            target: rect3
            property: "width"
            to: root.width-150;
            duration: (10*(root.width-150))/3.5
        }
        NumberAnimation {
            id: animation6
            target: rect3
            property: "width"
            to: 50;
            duration: (10*(root.width-150))/3.5
        }
        NumberAnimation {
            id: textanim5
            target: text3
            property: "x"
            to: root.width-200
            duration: (10*(root.width-150))/3.5
        }
        NumberAnimation {
            id: textanim6
            target: text3
            property: "x"
            to: 8
            duration: (10*(root.width-150))/3.5
        }
    }
}

}