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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.