PageTransformer has "snapping" effect when animating elevation

602 Views Asked by At

I have a ViewPager that is using a PageTransformer. I'm using the PageTransformer to animate the elevation of the cards inside my ViewPager whenever I scroll. Here is the code:

mViewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View page, float position) {
                View card = ((ViewGroup)page).getChildAt(0);
                CardView cardView = (CardView) card;

                float absoluteValue = Math.abs(position);

                if (absoluteValue < 1.3f) {
                    float scale = 1.3f - absoluteValue;
                    float scaleElevation = scale * 10f;
                    cardView.setCardElevation(scaleElevation);
                    //cardView.setElevation(scaleElevation);
                    Log.d(TAG, "scaleElevation: " + scaleElevation + ", position: " + position);

                }
            }
        });

Fairly straightforward. Now, what happens is, when you scroll, the elevation "animates" using the defined scale factor and the position in the scroll. But what happens, is when you finish scrolling to a new page, there's a sort of "snapping" effect with the shadows.

Here is a video that clearly shows the issue: https://gfycat.com/FlakyWarlikeEgg

So what's happening here, and what would the fix be?

0

There are 0 best solutions below