×
Namespaces

Variants
Actions

Creating an animated banner ticker tape in Qt Quick

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Compatibility
Platform(s):
Symbian
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

Banner1.jpg Banner3.jpg

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 }
}
}
This page was last modified on 13 June 2012, at 13:52.
69 page views in the last 30 days.