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

Question

就理论上来说，我有

Rectangle {
    id: testRect
    width: 100
}

一旦我以 50 毫秒的间隔滴答启动计时器，它应该只是扩展 Rect 的宽度：

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

效果很好，但即使是 onlz 50ms，它的过渡似乎仍然很不平滑。

知道如何平滑宽度变化吗？

请注意这只是为了学习目的，我在这里学到的东西会在不同的情况下使用，所以请不要问代码的目的是什么...

谢谢！

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（默认是线性动画）

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

how to do the transition of rectangle width change?

qt

qt4

qml

qt5