Huge flickering while main window height is animated - qt

Question

In a Qt Quick application, I want to animate the main window height when I click on a toggle button, in order to show or hide a kind of tray panel. The main form content contains a header frame, a swipe view and a grid view below it.
To reach the desired effect, I added the following animations in my qss code, which are run depending of my toggle button state:
ParallelAnimation
{
id: one_dev_connected_toggle_window_height_increase
running: false
NumberAnimation { target: mainWindow; property: "height"; to: 750; easing.type: Easing.InOutQuad; duration: 500}
}
ParallelAnimation
{
id: one_dev_connected_toggle_window_height_decrease
running: false
NumberAnimation { target: mainWindow; property: "height"; to: 450; easing.type: Easing.InOutQuad; duration: 500}
}
When I try to open the tray, the animation cause a huge flickering on my whole interface. However, when I close the tray, the animation cause no flickering at all, and the effect is smooth, as I expected.
My main window is declared as follow:
ApplicationWindow
{
id: mainWindow
visible: true
width: 700
height: 750
color: "#000000"
title: qsTr("Drag&Drop App")
flags: Qt.Window | Qt.FramelessWindowHint
....
Can someone explain me why I'm facing a such flickering? What should I change to fix it?

Answer 1

First I tried to reproduce your behavior with a small app, which is listed below:
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char* argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
QQmlContext* context = engine.rootContext();
// Adding the following line helps to remove the flickering
app.setAttribute(Qt::ApplicationAttribute::AA_ShareOpenGLContexts, true);
engine.load(QUrl("./data/main.qml"));
return app.exec();
}
main.qml
import QtQuick 2.13
import QtQuick.Controls 2.5
ApplicationWindow {
id: mainWindow
width: 800; height: 1000
title: "Animation Flickers"
visible: true
property bool large:true
MouseArea {
anchors.fill: parent
onClicked: {
if (mainWindow.large) {
decr.start()
} else {
incr.start();
}
mainWindow.large=!mainWindow.large;
}
}
ParallelAnimation
{
id: incr
running: false
NumberAnimation { target: mainWindow; property: "height"; to: 750; easing.type: Easing.InOutQuad; duration: 500}
}
ParallelAnimation
{
id: decr
running: false
NumberAnimation { target: mainWindow; property: "height"; to: 450; easing.type: Easing.InOutQuad; duration: 500}
}
}
Then I activated the application attribute AA_ShareOpenGLContexts and the flickering vanished. There might be many reasons for flickering and this might just remove one reason. I already experienced flickering by a non fitting graphics card driver. You should also consider to run your program on a different machine.
Please report back, if my solution didn't solved your problem.

Answer 2

Playing with the parameters, I finally found an acceptable solution.
Here's what I noticed:
Following the Aleph0's reply, I played around the OpenGL flags. I noticed that using the Qt::ApplicationAttribute::AA_UseOpenGLES flag resolved completely the flickering, however it caused a strange side effect in my case: the height of all components contained in my window became inconsistent while the main form height changed, causing a kind of wobbling during the animation, even with the correct anchoring and min and max height constraints defined.
On my main interface I removed the anchoring and used layouts instead. This resolved the strange wobbling during the height change, and almost all the flicker issues. I tested on different computers with different OS, the flickering appear only rarely in several particular cases.
However the wobbling still appears while the layouts are used if OpenGLES is used.
So replacing anchors by layouts was the solution in my case, even if it works not perfectly. But at least the result is acceptable.