How to make animation for Text

? Offline

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

alt text

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
        }
    }
}

? Offline

Work like charm thans to you @fcarney