Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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.

    0_1568816045288_tray_animation.gif

    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?



  • @jeanmilost

    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.



  • @jeanmilost

    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.


Log in to reply