how to do the transition of rectangle width change? - qt

Question

lets just say theoreticaly, that I have
Rectangle {
id: testRect
width: 100
}
and once i start the timer with interval tick 50ms, it should just extend the width of Rect:
Timer {
id: testTimer
interval: 50
onTriggered: testRect.width += 50
}
which works fine, but even when its onlz 50ms, its still seems to be quite not smooth transition.
Any idea how to smoothen the width change?
Please note this is only for learning purposes, what I will learn here will use in different situations, therefore please dont ask what is the puspose of the code...
Thank you!

Answer 1

You should rely on the animation features available in QtQuick to animate property changes.
In your case, you can define different states, with transitions between states where you define how an item should behave when going from one state to another. (See relevant 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"
}
}
}
}
Or you can define a behavior, which is more simple to define when you only act on a single property:
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
}
}
}
}
Finally, if you really want a smooth animation, you can use SmoothedAnimation instead of NumberAnimation (which is a linear animation by default)