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

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

0 голосов
/ 06 мая 2019

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

Rectangle {
    id: testRect
    width: 100
}

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

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

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

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

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

Спасибо!

Ответы [ 2 ]

1 голос
/ 07 мая 2019

Вы должны полагаться на функции анимации, доступные в 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 (которая по умолчанию является линейной анимацией)

0 голосов
/ 07 мая 2019

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

...