How to make animation for Text

[A Former User]

Hello, how can I make the marquee animation in the video below using QML?

[fcarney]

I was going to say use a ListView, but I cannot figure out how to animate index changes, nor make it loop around where it doesn't scroll the entire list.

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("ListView Wrap")

    property real delHeight: 25

    ListView {
        id: listview

        clip: true

        width: parent.width
        height: delHeight

        keyNavigationWraps: true

        model: 100

        currentIndex: 0

        property int translateDuration: 1000


        /*
        move: Transition {
            NumberAnimation { properties: "x,y"; duration: listview.translateDuration }
        }
        */

        delegate: Rectangle {
            /*
            transitions: Transition {
                PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: listview.translateDuration }
            }
            */

            Behavior on y {
                NumberAnimation { duration: listview.translateDuration }
            }

            height: delHeight

            Text {
                text: "Stuff from model: %1".arg(modelData)
            }
        }
    }

    Timer {
        interval: listview.translateDuration * 2
        running: true
        repeat: true

        onTriggered: {
            listview.incrementCurrentIndex()
        }
    }
}

[fcarney]

I don't understand why this won't work in the ListView:

Behavior on contentY {
            NumberAnimation { duration: 2000; easing.type: Easing.InOutQuad }
        }

This should be slowing down the change of contentY right?

[fcarney]

Maybe someone smarter than me on animations can tell me how to loop this without it rewinding?

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("ListView Wrap")

    property real delHeight: 25

    ListView {
        id: listview

        clip: true

        width: parent.width
        height: delHeight

        keyNavigationWraps: true

        model: 10

        property int translateDuration: 1000

        Behavior on contentY {
            NumberAnimation { duration: 750; easing.type: Easing.InOutQuad }
        }

        delegate: Rectangle {

            height: delHeight

            Text {
                text: "Stuff from model: %1".arg(modelData)
            }
        }
    }

    Timer {
        interval: 1000
        running: true
        repeat: true

        onTriggered: {

            let cheight = listview.contentY
            cheight += delHeight
            if(cheight >= listview.count*delHeight){
                cheight = 0
            }
            listview.contentY = cheight
        }
    }
}

Otherwise I don't think ListView is suitable for this.

[fcarney]

Make first and last the same in model:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("ListView Wrap")

    property real delHeight: 25

    ListView {
        id: listview

        clip: true

        width: parent.width
        height: delHeight

        keyNavigationWraps: true

        model: [0,1,0]

        property bool reverse: false

        Behavior on contentY {
            NumberAnimation { duration: listview.reverse ? 0 : 750; easing.type: Easing.InOutQuad; }
        }

        delegate: Rectangle {
            height: delHeight

            Text {
                text: "Stuff from model: %1".arg(modelData)
            }
        }
    }

    Timer {
        id: atimer

        interval: 1000
        running: true
        repeat: true

        onTriggered: {
            let cheight = listview.contentY
            cheight += delHeight
            if(cheight >= listview.count*delHeight){
                cheight = 0
                listview.reverse = true
                Qt.callLater(()=>{listview.reverse=false; atimer.triggered()})
            }
            listview.contentY = cheight
        }
    }
}

[A Former User]

Work like charm thans to you @fcarney