In this article, I won’t go into AndroidX migration too deeply but just to say/mention I didn’t encounter any big issue s during migration even in the big scale project. First of all, you need to migrate to AndroidX because ViewPager2 is not supported in the android.support library. The biggest change in the ViewPager2 API is that it now uses the RecyclerView. ViewPager2 is the replacement of ViewPager and is much better. An optional callback onAnimationCompleteCallback is called if supplied.Earlier this year, Google announced ViewPager2 alpha-04 in Google IO/19.
If runTime becomes greater than duration, it means the animation is complete.requestAnimationFrame(scrollOnNextTick) is passed as an argument that can be used to cancel the scroll animation by passing it to cancelAnimationFrame as an argument. If onRefUpdateCallback is supplied, it will be called on each tick.The scroll position is calculated and set based on the initial scroll position and the scroll amount for this tick.
getProgress takes runTime as an argument and returns the animation progress percentage (a value between 0 and 1), which is multiplied with the total scroll amount that needs to be scrolled, giving us the scroll amount that needs to be scrolled in this tick.runTime is calculated on each tick, which tells us how much time has elapsed since the animation started.requestAnimationFrame provides the number of milliseconds elapsed since 1970 as a default argument, which we store in startTime, and is also the argument to scrollOnNextTick on each tick. scrollOnNextTick is called for the first time, wrapped inside requestAnimationFrame.Let’s understand what’s happening step by step. Let’s look at the timing functions of some easing presets: For example, if the return value is 0.50 and the total scroll amount is 500px, that means the element has to be scrolled to 50% of 500, which is 250px. The return value lies between 0 and 1, which defines what fraction of the total scroll amount the element has to be scrolled to. For example, if the duration specified was 2s, and 0.5s have elapsed, then the input to the timing function would be 0.5 / 2 = 0.25. In the context of our problem, the timing function will take the ratio of the time elapsed and the total duration of the animation as input. So, we’ll have to wire that up ourselves!
Unfortunately, there is no out-of-the-box way to define the animation of a scroll. You can read in depth about timing functions here. Under the hood, both of these methods use the concept of timing functions.Ī timing function is a function of time and defines the variation of speed of an animation over a given duration, that is, its acceleration. easing presets ( ease-in, ease-out, ease-in-out etc.).In CSS, we have the provision of defining the animations of some properties like background-color and opacity through: animation parameters specified, which will dictate the pace of the scrolling.
This will depend on two interdependent factors: On each tick, that is, each invocation of the callback function, the function will calculate the amount that needs to be scrolled. requestAnimationFrame is a non-blocking way to call a function that performs an animation just before each repaint cycle of the browser. A continuously self-executing function is provided to requestAnimationFrame as a callback. Now, we need to start scrolling the element at a pace based on the duration provided in the parameters. function smoothScroll(scrollParams = īased on the type of element, we use appropriate properties, as seen below. The library will expose a function that will accept the different input parameters required like the element to scroll, the scroll amount, etc.