Qt Quick marquee text flash new text before animation starts
-
Hi, I am brand new at using Qt Quick and while messing around with a marquee text example I noticed a strange behaviour that I cannot find an answer for.
The problem is that the text field flashes the new text briefly before the animation starts, the only way I have found so far is to adjust the text.x value in onLineLaidOut , but this only causes the flashing text to move into the clipping area.
Is it possible to change the text property without it first flashing the new text and then start the animation ?
Thanks in advance
import QtQuick 2.5 Rectangle { id: marqueeText /* Rect */ property alias m_width: marqueeText.width property alias m_height: marqueeText.height property alias m_color: marqueeText.color /* Text and font */ property alias f_color: idText.color property alias text: idText.text /* Strings */ property int messIdx: 0 property string message: messages.get(messIdx).mess ListModel { id: messages ListElement{ mess: "This is message one....." } ListElement{ mess: "This is message two, a slightly longer one....." } } Row { anchors.fill: parent clip: true Text { id: idText text: message maximumLineCount: 1; font.pixelSize: 48 font.family: "Ubuntu" font.bold: true verticalAlignment: Text.AlignVCenter // text: messages.get(messIdx).mess onLineLaidOut: { print("Line completed ") // line.x = marqueeText.width } NumberAnimation { id: numberAnimation target: idText property: "x" from: marqueeText.width // to: -(idText.width+marqueeText.width); to: -idText.paintedWidth; duration: Math.round((idText.paintedWidth+marqueeText.width)*1000./128); alwaysRunToEnd: true Component.onCompleted: { numberAnimation.start(); } onStopped: { print("Animation Stopped") messIdx = (messIdx + 1) % messages.count; start(); } } } } }
-
Well, It appears that the animation from value is set and the text is offset we get the flashing text - I dont fully understand this yet, but the proper working marquee is below.
The solution is to set "from" to 0 and use the text offset in onLineLaidOut.
main.qml
import QtQuick 2.5 import QtQuick.Window 2.2 import QtQuick.Controls 1.4 Window { visible: true width: 800 height: 600 Marquee { id: marquee m_width: 288 m_height: 68 m_color: "black" f_color: "gold" anchors.centerIn: parent } }
Marquee.qml
import QtQuick 2.5 Rectangle { id: marqueeText /* Rect */ property alias m_width: marqueeText.width property alias m_height: marqueeText.height property alias m_color: marqueeText.color /* Text and font */ property alias f_color: idText.color property alias text: idText.text /* Strings */ property int messIdx: 0 property string message: messages.get(messIdx).mess ListModel { id: messages ListElement{ mess: "This is message one....." } ListElement{ mess: "This is message two, a slightly longer one....." } } Row { anchors.fill: parent clip: true Text { id: idText x: marqueeText.width text: message maximumLineCount: 1; font.pixelSize: 48 font.family: "Ubuntu" font.bold: true verticalAlignment: Text.AlignVCenter onLineLaidOut: { line.x = line.x + marqueeText.width } NumberAnimation { id: numberAnimation target: idText property: "x" from: 0 to: -(idText.paintedWidth + marqueeText.width); duration: Math.round((idText.contentWidth+marqueeText.width)*1000./128); alwaysRunToEnd: true Component.onCompleted: { numberAnimation.start(); } onStopped: { messIdx = (messIdx + 1) % messages.count; start(); } } } } }