Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Animate a tumbler



  • 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



  • @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 )
            }
        }
    


  • 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 !



  • @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"]
            }
        }
    }
    
    


  • 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?



  • @duarna said in Animate a tumbler:

    Is it possible to add an easing to this animation?

    AFAIK not directly out of the box



  • Got it, thanks. I mark as resolved.


Log in to reply