Accelerated scrolling in CarouselArranger?

Has anyone tried to implement "accelerated" scrolling in CarouselArranger?. Something like the the carousels in Apple App Store. When you flick your finger faster, the carousel will scroll through more panels and stop more smoothly.


  • did you tried strategyKindTranslate?
  • did you tried strategyKindTranslate?
  • @MAMISHO1 I have the feeling that it works better than strategyKind Transition. But somehow the sliding still decelerates too fast. I will investigate more whether i can change any parameters to make the sliding more smooth
  • Hey, I have been digging around the panels source a bit the last few days, and I might have an idea on how to solve this. Basically, you could try keeping track of your arrangement delta and skip an extra index forwards or backwards at the end of your drag transition if the dragging speed was sufficiently high.

    To elaborate further on why and how this would work:

    Currently when you drag your panels the enyo.Panels.dragstartTransition method decides which arrangement values you're transitioning between. It basically takes two arrangements, and as you drag, the arranger will linearly interpolate between those two arrangements.

    On each frame of your drag interaction, the enyo.Panels.dragTransition function gets the arranger to calculate a 'drag delta' using enyo.Arranger.calcDrag and derives an 'arrangement delta' from it using enyo.Arranger.measureArrangementDelta.

    enyo.Panels.dragTransition uses this arrangement delta to calculate how far you've dragged your panels along the transition between the two given arrangements by updating a fraction variable. If the fraction is out of bounds (aka, smaller than 0, or larger than 1) a new dragTransition is created to linearly interpolate (lerp) between the next two arrangements.

    What we learn from these internals of enyo.Panels is that, because all arrangement interpolations are linear, it's safe to just lerp between multiple arrangements as needed.

    This means that, once we finished our drag transition, rather than simply setting the current index to the toIndex of our current arrangement transition, we could just as safely move the current index one or two extra arrangements forwards or backwards.

    So basically what I'm suggesting, is to measure the arrangement delta as the user drags, and have enyo.Panels.dragfinishTransition set it's final index one or two steps backwards or forwards as the arrangement delta increases.

    If you want the animation to take longer depending on dragging speed, you could also increase the duration property of your panels' animator component before setting the index and probably return it back to normal in enyo.Panels.finishTransition.
  • @ruben_vreeken great explanation. Thank you
Sign In or Register to comment.