How to predict a good position for snapping a flickable in QML

Question

I have a flickable, which I want to snap to certain positions (which I compute in a specific way). I see two options:

in movementEnded I snap to the nearest position to "contentX" with a number animation
in flickEnded I snap to the nearest position to "contentX" with a number animation

Option 1 does not look good, the movement stops and afterwards the flickable starts moving again (the snapping positions are half a screen apart).

In Option 2 I find the choice of snap position difficult. If the user slides with a fast movement, I would prefer to snap to a position close to the position, where the movement would end, but that is hard to predict.

Here is example code for option 1:

NumberAnimation on contentY {
        id: yAnimation
        to: 0
        duration: 200
    }
onMovementEnded: {
       var index = Math.round(contentY / (itemHeight))
       yAnimation.to = index * itemHeight
       yAnimation.start()
}

What does your code look like? It sounds like you know what you need to do (option 2), but you just don't have the correct formula down yet. If you show us how you're attempting to predict the movement, we can help you out. As always, a minimal, complete example means that you'll get more answers. — Mitch

dtech dtech · Accepted Answer · 2015-11-27T21:22:06

In Option 2 I find the choice of snap position difficult. If the user slides with a fast movement, I would prefer to snap to a position close to the position, where the movement would end, but that is hard to predict.

You have properties for horizontal and vertical velocity, so out of those you can calculate a compound velocity, have another

property bool aboutToStop: horizontalVelocity + verticalVelocity < thresholdValue

and

onAboutToStopChanged: if (aboutToStop) playASnapAnimationToTheNearestItem()

How to predict a good position for snapping a flickable in QML

1 Answers