February 21, 2011

jech jech
Ant Farmer
128 posts

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

February 21, 2011

diegosarmentero diegosarment..
Lab Rat
33 posts

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!

 Signature 

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

February 22, 2011

mbrasser mbrasser
Lab Rat
452 posts

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

February 22, 2011

vishwajeet vishwajeet
Lab Rat
83 posts

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

 Signature 

Born To Code !!!

February 24, 2011

jech jech
Ant Farmer
128 posts

Thanks for the replies and suggestions. I developed this:

File main.qml:

  1. import Qt 4.7
  2.  
  3. Rectangle {
  4.     width: 200
  5.     height: 40
  6.     color: "#ffffff"
  7.  
  8.     Marquee {
  9.         runningText: "Long running text"
  10.     }
  11. }

File Marquee.qml:

  1. import Qt 4.7
  2.  
  3. Item {
  4.     id: marquee
  5.     property string runningText: ""
  6.     property int fontSize: 20
  7.     property int speed: 2500
  8.     property bool running: false
  9.     anchors.fill: parent
  10.  
  11.     Timer {
  12.         id: resetTimer
  13.         interval: speed
  14.         repeat: true
  15.         onTriggered: {
  16.             marquee.state = "State0"
  17.             marquee.state = "Moved"
  18.         }
  19.     }
  20.  
  21.     MouseArea {
  22.         anchors.fill: parent
  23.         onClicked: {
  24.             if ((!running) && (dummyText.paintedWidth >= parent.width)) {
  25.                 marquee.state = "Moved"
  26.                 resetTimer.start()
  27.                 marquee.running = true
  28.                 }
  29.              else {
  30.                 resetTimer.stop()
  31.                 marquee.state = "State0"
  32.                 marquee.running = false
  33.             }
  34.         }
  35.     }
  36.  
  37.     Text {
  38.         id: dummyText
  39.         font.pointSize: fontSize
  40.         text: runningText
  41.         visible: false
  42.     }
  43.  
  44.     Text {
  45.         id: dummyText2
  46.         font.pointSize: fontSize
  47.         text: runningText+" * "
  48.         visible: false
  49.     }
  50.  
  51.     Text {
  52.         id: text1
  53.         text: dummyText.paintedWidth < parent.width ? runningText : runningText+" * "
  54.         font.pointSize: fontSize
  55.     }
  56.  
  57.     Text {
  58.         id: text2
  59.         visible: dummyText.paintedWidth > parent.width ? true : false
  60.         text: dummyText.paintedWidth < parent.width ? runningText : runningText+" * "
  61.         font.pointSize: fontSize
  62.         x: dummyText2.paintedWidth
  63.     }
  64.  
  65.     states: [
  66.         State {
  67.             name: "Moved"
  68.             PropertyChanges { target: text1; x: -dummyText2.width }
  69.             PropertyChanges { target: text2; x:  0}
  70.         }
  71.     ]
  72.  
  73.     transitions: [
  74.         Transition {
  75.             from: "*"; to: "Moved"
  76.             NumberAnimation { properties: "x"; easing.type: Easing.Linear; duration: speed }
  77.         }
  78.     ]
  79. }

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.

February 25, 2011

vishwajeet vishwajeet
Lab Rat
83 posts

Cool and thanks for the post

 Signature 

Born To Code !!!

 
  ‹‹ QML WebView - Checkered Backgroud      [solved] Create a custom view ››

You must log in to post a reply. Not a member yet? Register here!