PageTransformer has "snapping" effect when animating elevation
Asked Answered
E

0

7

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?

Exult answered 21/8, 2016 at 19:33 Comment(2)
I am facing the same problem. It seems likes the shadow of the CardView gets rendered perspectively as if the light comes from the middle of the screen. Animating the elevation only calculates the shadow from the starting point, which is different when coming from the left of the screen or from the right instead of being in the middle. For whatever reason the "the perspective" for the shadow does not get animated. it only has the value from when you start dragging and then get's recalculated when the transition has finished.Pariah
did you manage to solve this ? I'm facing the same issueFortuitous

© 2022 - 2024 — McMap. All rights reserved.