Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Solved Animate a tumbler

    QML and Qt Quick
    2
    7
    480
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      duarna last edited by

      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

      ODБOï 1 Reply Last reply Reply Quote 0
      • ODБOï
        ODБOï @duarna last edited by ODБOï

        @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 )
                }
            }
        
        1 Reply Last reply Reply Quote 0
        • D
          duarna last edited by

          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 !

          ODБOï 1 Reply Last reply Reply Quote 0
          • ODБOï
            ODБOï @duarna last edited by ODБOï

            @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"]
                    }
                }
            }
            
            
            1 Reply Last reply Reply Quote 3
            • D
              duarna last edited by

              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?

              ODБOï 1 Reply Last reply Reply Quote 0
              • ODБOï
                ODБOï @duarna last edited by

                @duarna said in Animate a tumbler:

                Is it possible to add an easing to this animation?

                AFAIK not directly out of the box

                1 Reply Last reply Reply Quote 0
                • D
                  duarna last edited by

                  Got it, thanks. I mark as resolved.

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post