QML window is bouncing while changing size and position - qt

Question

My purpose is to glue the window to the right alignment of the screen while resizing.
During animation (or changing explicity) of window width and x (binded to width), ApplicationWindow is bouncing to left (flickering for changing explicity).
I've already was searching for the solution, but nothing is working for me.
Adding the attribute:
QCoreApplication::setAttribute(Qt::AA_UseOpenGLES);
helped a lot, but window is still bouncing to left and right.
main.qml:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
ApplicationWindow {
id: root
height: 300
width: 300
visible: true
flags: Qt.FramelessWindowHint
x: Screen.width - width
Material.theme: Material.Dark
NumberAnimation on width {
id: animation
easing.type: Easing.InOutQuad
}
property var lowerSize: true
Rectangle {
anchors.fill: parent
Button {
anchors.centerIn: parent
enabled: !animation.running
text: lowerSize ? 'Size up' : 'Size down'
onClicked: {
animation.from = lowerSize ? 300 : 600
animation.to = lowerSize ? 600 : 300
animation.start()
lowerSize = !lowerSize
}
}
}
}
I've made example code for reproducing the issuee on github qml-flickering-example.

Answer 1

I had slightly different behavior on macOS than you are seeing in Windows (stutters on shrink for me) but it does indeed still stutter.
It appears to be because you are animating the width but then relying on QML bindings to update x. As a result, the x update is lagging behind the width update by one frame.
Using a ParallelAnimation and animating both at the same time fixed it for me:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
ApplicationWindow {
id: root
height: 300
width: 300
visible: true
flags: Qt.FramelessWindowHint
Component.onCompleted: {
x = Screen.width - width;
y = 0;
}
Material.theme: Material.Dark
ParallelAnimation {
id: animation
NumberAnimation {
id: widthAnimation
target: root
property: "width"
easing.type: Easing.InOutQuad
}
NumberAnimation {
id: xAnimation
target: root
property: "x"
easing.type: Easing.InOutQuad
}
}
property bool lowerSize: true
Rectangle {
anchors.fill: parent
Button {
anchors.centerIn: parent
enabled: !animation.running
text: lowerSize ? 'Size up' : 'Size down'
onClicked: {
widthAnimation.from = lowerSize ? 300 : 600
widthAnimation.to = lowerSize ? 600 : 300
xAnimation.from = lowerSize ? Screen.width - 300 : Screen.width - 600
xAnimation.to = lowerSize ? Screen.width - 600 : Screen.width - 300
animation.start()
lowerSize = !lowerSize
}
}
}
}