如何进行矩形宽度变化的过渡

Question

让我说我有

Rectangle {
    id: testRect
    width: 100
}

，一旦我用Interval Tick 50ms启动计时器，它就应该扩展RECT的宽度：

Timer {
    id: testTimer
    interval: 50
    onTriggered: testRect.width += 50
}

它可以正常工作，但是即使它的Onlz 50ms，它仍然似乎并不是平稳的过渡。

任何想法如何平滑宽度变化？

请注意，这仅是出于学习目的，我将在此处学习的内容将在不同的情况下使用，因此请不要询问代码的脓液是什么...

谢谢！

Answer 1

您应该依靠qtquick中可用的动画功能来动画属性更改。

在您的情况下，您可以定义不同的状态，并通过定义项目从一个状态到另一个状态时应表现的状态之间的过渡。(请参阅有关状态的相关文档(

import QtQuick 2.9
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    Rectangle {
        id: rect
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 100
        height: 200
        color: "red"
        state: "default"
        states: [
            State {
                name: "default"
                PropertyChanges {
                    target: rect
                    width: 200
                }
            },
            State {
                name: "bigger"
                PropertyChanges {
                    target: rect
                    width: 250
                }
            }
        ]
        transitions: Transition {
            NumberAnimation {
                duration: 500 //ms
                target: rect
                properties: "width"
            }
        }
        // Just there to trigger the state change by clicking on the Rectangle
        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (rect.state === "default")
                    rect.state = "bigger"
                else
                    rect.state = "default"
            }
        }
    }
}

或者您可以定义行为，当您仅在单个属性上行动时，它更容易定义：

import QtQuick 2.9
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    Rectangle {
        id: rect
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 100
        height: 200
        width: 200
        color: "red"

        Behavior on width {
            NumberAnimation {
                duration: 500 //ms
            }
        }
        // Just there to trigger the width change by clicking on the Rectangle
        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (rect.width === 200)
                    rect.width = 250
                else
                    rect.width = 200
            }
        }
    }
}

最后，如果您真的想要一个平滑的动画，则可以使用平滑启动而不是numbernimation(默认是线性动画(