Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Running text animation
Forum Updated to NodeBB v4.3 + New Features

Running text animation

Scheduled Pinned Locked Moved QML and Qt Quick
6 Posts 4 Posters 13.2k 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.
  • J Offline
    J Offline
    jech
    wrote on last edited by
    #1

    Hello,

    I'd like to implement following behavior. I have a ListView with some components containing text. If the text is to long, it is cut using elide: Text.ElideRight. I want to implement a functionality where the text of a selected item will be "running". I hope you understand what I mean by running (move from left to right in an endless loop).

    How could I implement it? I know how to get selected item and how to implement states. The only thing I'm missing is the actual implementation of running text. I could probably come up with some solutions based on timers and margins. But I'm not sure, if this is the correct way. I think it would be pretty resource hungry If I did it by using timers and changing margin.

    1 Reply Last reply
    0
    • D Offline
      D Offline
      diegosarmentero
      wrote on last edited by
      #2

      Have a look at Qt Animation Framework:
      http://doc.qt.nokia.com/4.7/animation-overview.html

      It's really good, and came with a lot of examples!

      Diego Sarmentero
      Blog: http://diegosarmentero.com.ar
      Twitter: http://twitter.com/diegosarmentero

      1 Reply Last reply
      0
      • M Offline
        M Offline
        mbrasser
        wrote on last edited by
        #3

        Hi,

        Here's an example built using the Timer element: http://wiki.forum.nokia.com/index.php/Creating_a_QML_Marquee_Component (you may also be able to come up with a more elegant solution using QML's "animation elements":http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeanimation.html)

        Regards,
        Michael

        1 Reply Last reply
        0
        • V Offline
          V Offline
          vishwajeet
          wrote on last edited by
          #4

          Have a look at http://qt-apps.org/content/show.php/QSlide?content=75303

          Born To Code !!!

          1 Reply Last reply
          0
          • J Offline
            J Offline
            jech
            wrote on last edited by
            #5

            Thanks for the replies and suggestions. I developed this:

            File main.qml:
            @
            import Qt 4.7

            Rectangle {
            width: 200
            height: 40
            color: "#ffffff"

            Marquee {
                runningText: "Long running text"
            }
            

            }
            @

            File Marquee.qml:
            @
            import Qt 4.7

            Item {
            id: marquee
            property string runningText: ""
            property int fontSize: 20
            property int speed: 2500
            property bool running: false
            anchors.fill: parent

            Timer {
                id: resetTimer
                interval: speed
                repeat: true
                onTriggered: {
                    marquee.state = "State0"
                    marquee.state = "Moved"
                }
            }
            
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if ((!running) && (dummyText.paintedWidth >= parent.width)) {
                        marquee.state = "Moved"
                        resetTimer.start()
                        marquee.running = true
                        }
                     else {
                        resetTimer.stop()
                        marquee.state = "State0"
                        marquee.running = false
                    }
                }
            }
            
            Text {
                id: dummyText
                font.pointSize: fontSize
                text: runningText
                visible: false
            }
            
            Text {
                id: dummyText2
                font.pointSize: fontSize
                text: runningText+" * "
                visible: false
            }
            
            Text {
                id: text1
                text: dummyText.paintedWidth < parent.width ? runningText : runningText+" * "
                font.pointSize: fontSize
            }
            
            Text {
                id: text2
                visible: dummyText.paintedWidth > parent.width ? true : false
                text: dummyText.paintedWidth < parent.width ? runningText : runningText+" * "
                font.pointSize: fontSize
                x: dummyText2.paintedWidth
            }
            
            states: [
                State {
                    name: "Moved"
                    PropertyChanges { target: text1; x: -dummyText2.width }
                    PropertyChanges { target: text2; x:  0}
                }
            ]
            
            transitions: [
                Transition {
                    from: "*"; to: "Moved"
                    NumberAnimation { properties: "x"; easing.type: Easing.Linear; duration: speed }
                }
            ]
            

            }@

            If you click the text, it will start running, and if you click it again, it will stop. If the text fits the window, nothing happens when you click it.

            1 Reply Last reply
            0
            • V Offline
              V Offline
              vishwajeet
              wrote on last edited by
              #6

              Cool and thanks for the post

              Born To Code !!!

              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