Running text animation

[jech]

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.

[diegosarmentero]

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!

[mbrasser]

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

[vishwajeet]

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

[jech]

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.

[vishwajeet]

Cool and thanks for the post