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.
5 replies
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 [doc.qt.nokia.com])
Regards,
Michael
Have a look at http://qt-apps.org/content/show.php/QSlide?content=75303
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.
You must log in to post a reply. Not a member yet? Register here!