How to make a scrollable text



  • Goodmorning,
    I'm trying to make a scrollable text that enters inside a rectangle from the left and then goes out from the right, like the gif below.
    https://media.giphy.com/media/qoDDQhekkyVe8/100.webp

    So far I've wrote the code below searching in the net, but I don't know how to make it "enter" and "go out" from a rectangle.

    import QtQuick 2.3
    
    
    Item {
    
        property int clipRegion
        property string testo
        property color colore
        property int sfas: 0
    
        Rectangle
        {
            height: parent.height
            width: clipRegion
            color: "green"
        }
    
        Text{
            id : text
            color: colore
            text: testo
            width: clipRegion
    
            NumberAnimation
            {
                alwaysRunToEnd: true
                id: numberAnimation
                targets: text
                from: clipRegion
                to: 0
                duration: 5000
                property: "x"
    
                Component.onCompleted:  {running = true;}
    
                onRunningChanged:
                    if (!running)
                    {
                        running=true;
                    }
              }
         }
    }
    

    Any help would be highly appreciate.
    Thank you in advanced.



  • Hi @davidino

    A quick and dirty way to do it purely with QML is as follows (animation starts when you click the text)

    0_1533307221069_scrollingtext.gif

        Rectangle {
            id: scrollingText
            width: 200
            height: 20
            clip: true
            color: "yellow"
    
            property string text: "This is a scrolling text!"
            property int duration: 2000
    
            Text {
                id: text1
                verticalAlignment: Text.AlignVCenter
                text: scrollingText.text
                x: 0
            }
    
            Text {
                id: text2
                verticalAlignment: Text.AlignVCenter
                text: scrollingText.text
                x: scrollingText.width
            }
    
            SequentialAnimation {
                id: animation
                loops: Animation.Infinite
    
                ParallelAnimation {
                    PropertyAnimation {target: text1; property: "x"; to: -scrollingText.width; duration: scrollingText.duration}
                    PropertyAnimation {target: text2; property: "x"; to: 0; duration: scrollingText.duration}
                }
    
                PropertyAnimation {target: text1; property: "x"; to: scrollingText.width; duration: 0}
    
                ParallelAnimation {
                    PropertyAnimation {target: text1; property: "x"; to: 0; duration: scrollingText.duration}
                    PropertyAnimation {target: text2; property: "x"; to: -scrollingText.width; duration: scrollingText.duration}
               }
    
               PropertyAnimation {target: text2; property: "x"; to: scrollingText.width; duration: 0}
            }
    
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    animation.running = true
                }
            }
        }
    

    Maybe someone else will come with something better.
    Cheers.



  • Hello @Diracsbracket ,
    that's brilliant. I'd never have thought about it.
    THank you very much.


Log in to reply
 

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