Solved 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.