ViewPager页面滑动效果，自定义PageTransformer实现想要的变换效果

PageTransformer是ViewPager内部定义的一个接口，用于控制ViewPager中页面（item view）的滑动效果。PageTransformer可以在页面滑动过程中自定义页面的变换效果，如透明度渐变、缩放、旋转等。

接口定义

PageTransformer接口定义了一个方法transformPage(View page, float position)

• page：表示当前正在滑动的页面视图。
• position：表示页面相对于当前中心页面的位置，值是一个浮点数，范围根据滑动方向有所不同。例如，当向左滑动时，当前页面的position值变化为[0~-1]，右边页面的position值变化为[1~0]；向右滑动时，当前页面的position值变化为[0~1]，左边页面的position值变化为[-1~0]。

常见使用场景

• 「透明度渐变」：在页面滑动过程中改变页面的透明度，实现淡入淡出效果。
• 「缩放」：在页面滑动过程中改变页面的大小，实现缩放效果。
• 「旋转」：在页面滑动过程中改变页面的旋转角度，实现旋转效果。

实现方式

创建一个类并实现PageTransformer接口，重写transformPage(View page, float position)方法。根据position参数的值来更改page视图的属性，如透明度、大小、旋转角度等，以达到自定义的滑动效果。

示例代码

透明渐变效果

public class AlphaPageTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(@NonNull View page, float position) {
        page.setAlpha(1 - Math.abs(position));
    }
}

在transformPage方法中，根据position的绝对值来设置页面的透明度，使页面在滑动过程中透明度发生变化。

透明旋转翻页效果

public class RotatePageTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(@NonNull View page, float position) {
        int pagerWidth = mViewPager.getWidth();
        float horizontalOffsetBase = (pagerWidth - pagerWidth * 1.2f) / 2 / offscreenPageLimit + 45;

        if (position >= offscreenPageLimit || position = 0) {
            float translationX = (horizontalOffsetBase - page.getWidth()) * position;
            page.setTranslationX(translationX);
        }
        if (position > -1 && position  offscreenPageLimit - 1) {
            page.setAlpha((float) (1 - position + Math.floor(position)));
        } else {
            page.setRotation(0);
            page.setAlpha(1);
        }
        if (position == 0) {
            page.setScaleX(1.2f);
            page.setScaleY(1.2f);
        } else {
            float scaleFactor = Math.min(1.2f - position * 0.1f, 1.2f);
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
        }

        ViewCompat.setElevation(page, (offscreenPageLimit - position) * 5);
    }
}

调用ViewPager的setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer)方法，设置实现的PageTransformer效果。

ViewPager viewPager = findViewById(R.id.view_pager);
viewPager.setPageTransformer(true, new RotatePageTransformer());

图片