Animate a tumbler

[duarna]

Hi guys,

I'm really new to QML and I can't figure out how to animate a tumbler. You may expect a newbie question...

I want to create a counter. Every second, my tumbler would increase its overall value by 1.

I manage to create a timer and a function, but when the tumbler changes its value, no animation occurs. It switches from 1 to 2 immediately.

How can I make it moves smoothly from a value to another?

Thanks a lot

Arnaud

[LeLev]

@duarna Hi and welcome to devnet.

It looks like with the positionViewAtIndex() function there is no animation

but if you change the currentIndex property directly you get animation

    Tumbler{
        id:tumbler
        model : 5
        anchors.centerIn: parent
    }
    Timer{
        interval: 1000
        running: true
        repeat: true
        onTriggered: {
            tumbler.currentIndex = Math.round(Math.random()*5 )
        }
    }

[duarna]

Oooh got it, thanks;

So I will review my question, because I'm obviously doing it wrong and I don't know where.

I used the item Tumbler and I fulfilled it with TumblerColumns.
It seems that this kind of Tumbler is not the same as the Tumbler we can find on QtQuick.Controls. Indeed the QtQuick.Extras one, there is no "model" property for example.

How all of this work ? Why are they several Tumbler ?
With TumblerColumn, "currentIndex" is a read-only property, so no way to modify it, I have to deal with Tumbler.setCurrentIndexAt(), and it this case no animation occurs.

I want the design of the QtQUick.Extras' Tumbler, so what is the solution? Customize the QtQuick.Controls' Tumbler so it looks like the QtQuick.Extras' Tumbler ? Sounds weird...

Appreciate your help, thank you !

[LeLev]

@duarna said in Animate a tumbler:

I have to deal with Tumbler.setCurrentIndexAt(), and it this case no animation occurs.

in that function the 3rd parameter is the animation duration ;)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Extras 1.4 as Ex

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    //    Tumbler{
    //        id:tumbler
    //        model : 5
    //        anchors.centerIn: parent
    //    }
        Timer{
            interval: 1000
            running: true
            repeat: true
            onTriggered: {
                //tumbler.currentIndex = Math.round(Math.random()*5 )
                //tumbler.positionViewAtIndex(Math.random()*5,Tumbler.Center)
                //c1.currentIndex = Math.round(Math.random()*5 )

                exTumbler.setCurrentIndexAt(/*column index*/0,/*item index*/ Math.round(Math.random()*5),/*duration in ms of Animation*/1000 )

            }
        }

    Ex.Tumbler{
        id:exTumbler
        anchors.centerIn: parent
        Ex.TumblerColumn {
            id: c1
            model: 5
        }
        Ex.TumblerColumn {
            id: c2
            model: [0, 1, 2, 3, 4, 5]
        }
        Ex.TumblerColumn {
            id: c3
            model: ["A", "B", "C", "D", "E"]
        }
    }
}

[duarna]

I... simply didn't see this 3rd paramter... My apologize, thank you so much!
Can I ask you a very last question? Is it possible to add an easing to this animation?

[LeLev]

@duarna said in Animate a tumbler:

Is it possible to add an easing to this animation?

AFAIK not directly out of the box

[duarna]

Got it, thanks. I mark as resolved.