Question

让我们从理论上讲，我已经拥有

Rectangle {
    id: testRect
    width: 100
}

一旦我以50ms的间隔间隔启动计时器，它就应该扩展Rect的宽度：

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

可以正常工作，但是即使在50毫秒内，它的过渡效果似乎也不是很平滑。

有什么想法可以使宽度变化更平滑吗？

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

谢谢！

Answer 1

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

在您的情况下，您可以定义不同的状态，并可以在状态之间进行转换，以定义项目从一种状态转换到另一种状态时的行为方式。（请参阅相关的documentation about states）

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

或者您可以定义behavior，当您仅对单个属性执行操作时，定义起来更简单：

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

最后，如果您确实想要平滑的动画，则可以使用SmoothedAnimation代替NumberAnimation（默认情况下为线性动画）

Answer 2

您可能需要减少矩形的增量。例如，您可以将其设置为5而不是50

矩形宽度的过渡如何变化？

2 个答案: