Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Animators make UI unresponsive
Forum Updated to NodeBB v4.3 + New Features

Animators make UI unresponsive

Scheduled Pinned Locked Moved General and Desktop
10 Posts 1 Posters 2.6k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    Slion
    wrote on last edited by
    #1

    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.

    1 Reply Last reply
    0
    • S Offline
      S Offline
      Slion
      wrote on last edited by
      #2

      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;
          }
      }
      

      }
      @

      1 Reply Last reply
      0
      • S Offline
        S Offline
        Slion
        wrote on last edited by
        #3

        The NumberAnimation version is definitely showing tearing and jerks.

        1 Reply Last reply
        0
        • S Offline
          S Offline
          Slion
          wrote on last edited by
          #4

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

          1 Reply Last reply
          0
          • S Offline
            S Offline
            Slion
            wrote on last edited by
            #5

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

            1 Reply Last reply
            0
            • S Offline
              S Offline
              Slion
              wrote on last edited by
              #6

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

              1 Reply Last reply
              0
              • S Offline
                S Offline
                Slion
                wrote on last edited by
                #7

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

                1 Reply Last reply
                0
                • S Offline
                  S Offline
                  Slion
                  wrote on last edited by
                  #8

                  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?

                  1 Reply Last reply
                  0
                  • S Offline
                    S Offline
                    Slion
                    wrote on last edited by
                    #9

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

                    1 Reply Last reply
                    0
                    • S Offline
                      S Offline
                      Slion
                      wrote on last edited by
                      #10

                      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.

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved