Animators make UI unresponsive



  • I'm trying to get a smooth animation and a responsive UI using Qt 5.3 and it's proving to be quite a challenge.

    I have the following in a file named MarqueeText.qml

    @import QtQuick 2.2

    Item {
    id:marqueeText
    height: scrollingText.height
    clip: true
    property int pixelsPerSeconds:25
    property alias text: scrollingText.text
    property alias separator: separatorText.text

    Text {
        id:scrollingText
    }
    
    Text {
        id:separatorText
        text:" || "
        x:scrollingText.x+scrollingText.width
    }
    
    Text {
        id:followingText
        text:scrollingText.text
        x:scrollingText.x+scrollingText.width+separatorText.width
    }
    
    ParallelAnimation {
        id: animation
        loops: Animation.Infinite;
    
        XAnimator {
            target: scrollingText;
            //from: 0;
            to: -scrollingText.width-separatorText.width;
            duration: (scrollingText.width+separatorText.width)*1000/pixelsPerSeconds
        }
    
        XAnimator {
            target: separatorText;
            from: separatorText.x;
            to: separatorText.x-scrollingText.width-separatorText.width;
            duration: (scrollingText.width+separatorText.width)*1000/pixelsPerSeconds
        }
    
        XAnimator {
            target: followingText;
            from: followingText.x;
            to: followingText.x-scrollingText.width-separatorText.width;
            duration: (scrollingText.width+separatorText.width)*1000/pixelsPerSeconds
        }
    
    }
    
    
    
    
    
    MouseArea {
        id:mouseArea
        anchors.fill: parent
        onClicked: {
            animation.running=true;
        }
    
    }
    

    }
    @

    I've been using it as follow:

    @
    Rectangle {
    border.width: 2
    border.color: "black"
    color: "lightsteelblue"
    anchors.horizontalCenter: parent.horizontalCenter
    width: 250
    height: text.height + 10
    y:100
    MarqueeText {
    id:text
    width: 200
    pixelsPerSeconds:50
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    text: "start ------ abcdefghijklmnopqrtaksdjfkdfjklsdjflksdjfklsjadfkljsad;flasjdlfjasdfjldsdfljf---- end"
    separator: " | "
    }
    }@

    Animators make it run smoother than standard animation but somehow it creates terrible lags on the UI thread.



  • The following code using animations instead of animators does not have this UI unresponsiveness issue. That's odd cause animators are suppose to run a lot smoothers than standard animation right?
    I'm probably missing something.

    @import QtQuick 2.2

    Item {
    id:marqueeText
    height: scrollingText.height
    clip: true
    property int pixelsPerSeconds:25
    property alias text: scrollingText.text
    property alias separator: separatorText.text

    Text {
        id:scrollingText
    }
    
    Text {
        id:separatorText
        text:" || "
        x:scrollingText.x+scrollingText.width
    }
    
    Text {
        id:followingText
        text:scrollingText.text
        x:scrollingText.x+scrollingText.width+separatorText.width
    }
    
    ParallelAnimation {
        id: animation
        loops: Animation.Infinite;
    
        NumberAnimation {
            target: scrollingText;
            properties: "x"
            //from: 0;
            to: -scrollingText.width-separatorText.width;
            duration: (scrollingText.width+separatorText.width)*1000/pixelsPerSeconds
        }
    
        NumberAnimation {
            target: separatorText;
            properties: "x"
            from: separatorText.x;
            to: separatorText.x-scrollingText.width-separatorText.width;
            duration: (scrollingText.width+separatorText.width)*1000/pixelsPerSeconds
        }
    
        NumberAnimation {
            target: followingText;
            properties: "x"
            from: followingText.x;
            to: followingText.x-scrollingText.width-separatorText.width;
            duration: (scrollingText.width+separatorText.width)*1000/pixelsPerSeconds
        }
    }
    
    MouseArea {
        id:mouseArea
        anchors.fill: parent
        onClicked: {
            animation.running=true;
        }
    }
    

    }
    @



  • The NumberAnimation version is definitely showing tearing and jerks.



  • XAnimation version is also showing jerks and tearing to a lesser extent I guess and as an added bonus you get UI lags :)



  • I'm running that on Windows 7 by the way.



  • Alright it's a lot smoother if I run it rather than debug it :)



  • Animator still lags/almost freezes the UI when running instead of debugging.



  • So I did check the animator example from the SDK, the one with the bouncing smiley and it exhibits the exact same problem I have. It's apparently also fairly easy to have it crash...

    So really smooth animation on windows is not happening with Qt 5.3 and Quick, sadly.

    Am I holding it wrong or do I have too high expectations? Are the dev recognizing those issues and working on it?



  • And now I know why https://bugreports.qt-project.org/browse/QTBUG-38728
    Is there a way to enable threaded render loop on windows?



  • Ok one can use QML_FORCE_THREADED_RENDERER on Windows as explained http://qt-project.org/doc/qt-5/qtquick-visualcanvas-scenegraph.html#threaded-render-loop

    This way the UI does not lag when running animators but the animation in my example is still jerky and awful.

    Could be an issue with subpixel precision of that text animation.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.