Как сделать переход изменения ширины прямоугольника?

Question

давайте просто скажем теоретически, что у меня есть

Rectangle {
    id: testRect
    width: 100
}

и как только я запускаю таймер с интервалом 50 мс, он должен просто увеличить ширину Rect:

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

, который работает нормально, но даже когда он только 50 мс, он все еще выглядит не совсем плавным переходом.

Есть идеи, как сгладить изменение ширины?

Обратите внимание, что это только для целей обучения, то, что я изучу здесь, будет использоваться в различных ситуациях, поэтому, пожалуйста, не спрашивайте, какова цель кода ...

Спасибо!

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

Наконец, если вы действительно хотите плавную анимацию, вы можете использовать SmoothedAnimation вместо NumberAnimation (которая по умолчанию является линейной анимацией)

Answer 2

вам может понадобиться уменьшить приращение прямоугольника. например, вы можете сделать это 5 вместо 50