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