Advice for doing a slot-machine animation
-
Dear all,
I have 20 images and I want to create an animation like a slot-machine when a user click on a button and at the end of animation only one of the 20 image will be at the center of screen (choosen randomly).How can I do that with Qt Quick ??
(I don't need the exact code... just some hints or pseudo-code for understanding which Item to use for doing that)
Thanks,
Gianluca. -
One option may be to use the PathView element (http://qt-project.org/doc/qt-5.1/qtquick/qml-qtquick2-pathview.html). The PathView element would provide you with a way to lay out your images to have a bit of a curvature to them (like a real slot machine). To make the slot machine spin, you could try animating the PathView's currentIndex property (for instance, by defining a Behavior for it).
-
Thank you for pointing me to PathView.
It's the right item to do what I need, but there is just a little adjustment that I don't know how to do: make the movement of the items on a PathView only in one direction.
In fact, if you change the currentIndex, the PathView move forward or backward depending on the shortest path to do… but I want that the PathView will move the item only forward, and never go backward.Is it possible ??
-
Some possibilities (I haven't tried any, so I'm not sure if they work):
(1) The Path element has a closed property for defining a path that loops back on itself. You could try setting this to true. See if setting a high currentIndex value (a value larger than the largest) causes it to loopback around.
(2) Same as (1) above, except instead of setting the currentIndex property directly, try using the PathView's incrementCurrentIndex() function. I suppose it's possible that this function has additional boundary logic in place that takes into account the closed property value setting and loops the currentIndex around properly.
(3) Worst case, you have to adjust the currentIndex in such a way that it forces the slot machine to rotate in one direction. It would be this sequence:
currentIndex = 0
currentIndex = count - 1
currentIndex = 0
currentIndex = count - 1
...
This sequence should make the PathView rotate in a single direction.These are the only solutions I can think of. Perhaps someone else has some other ideas as well.
-
FYI, just today I found an example using PathView that kind of looks like a slot-machine. It's in the new online QML book (best QML reference I've found): http://qmlbook.org/ch06/index.html#the-pathview.
You may consider adapting the code in the example for your needs.
