Solved Animating a window height cause huge flickering on content
-
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, which is placed on the animated part.
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 ....
int main(int argc, char *argv[]) { QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QGuiApplication app(argc, argv); QQmlApplicationEngine engine; const QUrl url(QStringLiteral("qrc:/main.qml")); QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, &app, [url](QObject* pObj, const QUrl &objUrl) { if (!pObj && url == objUrl) QCoreApplication::exit(-1); // set the default form height pObj->setProperty("height", 450); }, Qt::QueuedConnection); engine.load(url); QList<QObject*> objects = engine.rootObjects(); // connect the signals (i.e events) to the event handler WEventHandler eventHandler(NULL); engine.rootContext()->setContextProperty("WEventHandler", &eventHandler); if (objects.size()) eventHandler.SetRoot(objects[0]); return app.exec(); }
I cannot figure out what the issue is, it's like a double buffering is missing on my components, but the issue only happen with one animation: when I try to animate the window height increase. None of my other animations (page swiping, button transitions, ...) present a such problem. I searched during hours on the web, without success. Can someone explain me why I'm facing a such flickering, and what should I change to fix it?
-
Playing with the parameters, I finally found an acceptable solution.
Here's what I noticed:
- 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.
-
Playing with the parameters, I finally found an acceptable solution.
Here's what I noticed:
- 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.