Running text animation



  • 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.



  • 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!



  • 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





  • 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.



  • Cool and thanks for the post


Log in to reply
 

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