How to make a scrollable text

davidino

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.

Diracsbracket

Hi @davidino

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

    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.

davidino

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