Creating an animated banner ticker tape in Qt Quick

Comments

(no comments yet)

Log in or Join to leave comments.

Article Metadata

---

Article

Created: jaydipNokia (18 Jun 2011)

Last edited: hamishwillee (13 Jun 2012)

This code snippet shows how to create banner, or "ticker tape" animation using the QML NumberAnimation element. Text moves from right to left.

Screenshots

Banner.qml

The example uses a QML Row Element and a NumberAnimation.

import QtQuick 1.0
 
Rectangle {
     id: screen  
     property int pixelSize: screen.height * 1.25  
     property color textColor: "#ee9797"  
     property string text: "Qt Quick ! " 
     width: 640; height: 320
     color: "steelblue" 
     Row {  
         y: -screen.height / 13.5  
         width: 640  
         NumberAnimation on x { from: 0; to: -text.width ; duration: 7000; loops: Animation.Infinite }  
         Text { id: text;font.pixelSize: 320; color: screen.textColor; text: screen.text }  
         Text { color: screen.textColor; font.pixelSize: 320; text: screen.text ;styleColor: "#ee1818" }  
         Text { font.pixelSize: 320;color: screen.textColor; text: screen.text }  
     }  
 }