I would like to animate the "snap" effect when a ListView
snaps to a specific item.
I enable "snapping" with the snapMode: ListView.SnapOneItem
property. Currently it just de-accelerates to the current item and stops, but it would be nice if I could get it to make a "bounce" effect when it stops.
Any ideas about how I can do this?
Flickable
has a rebound
property, but this seems to not work for the snapping on elements inside a ListView
.
Since you used
SnapOneItem
, you can insert a bounce effect once the movement is finished, i.e. oncemovementEnded
signal is emitted. IMO applying an animation on each item would be overkill in this case. Better would be to animate thecontentY
property of theListView
.The following is a possible approach which produces a bounce (don't know if this is the exact effect you are searching for):
When you release the items from a drag or movement the bounce is produced. The
amplitude
andperiod
properties can be adjusted to obtain a stronger or lighter effect (the same applies for the value ofto
properties).EDIT
As you've seen, if the list is moved via
incrementCurrentIndex()
no real movement occurs, i.e. themovementEnded
signal is not emitted. In such a case you can exploit the change of value that occurs for thecurrentIndex
. I've modified the example to combine this approach with the previous one and to show the usage I've inserted aTimer
to callincrementCurrentIndex()
function.The
!list.moving
check is added to avoid double animations when the list is moved and to guarantee consistency in the example, since theTimer
can generate inconsistent jumps while the list is dragged. Clearly, other more specific constraints can be added, depending on your requirements.