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?
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