Qt Quick marquee text flash new text before animation starts

moscowbob

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();
                }
            }
        }
    }
}

moscowbob

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();
                }
            }
        }
    }
}