30天学习笔记 -day 19-viewpager动画(PageTransformer )

一般的ViewPager在做滑动的过程中总是会觉得少了点流畅感，今天会使用PageTransformer实作ViewPager切换动画。
今天的页面会使用昨天的页面。

PageTransformer介绍

PageTransformer是ViewPager内部定义的接口，应用於控制ViewPager中页面的滑动，其接口提供一种方法transformPage()，该方法会在页面切换(从a页面转到b页面)时调用。

@Override
    public void transformPage(@NonNull View page, float position) {
    }

参数View是指页面，参数position是指获取页面上的位置，根据该位置确定页面转换方向，它是一个动态属性，会随着viewpager滑动页面产生变化。

-1的位置是先前的页面，0的位置是当前的页面，1的位置是下一个的页面

当viewpager滑动页面时参数position的变化，如下图: -1 ->-1.5, 0 ->-0.5, 1 ->0.5

在这过程中就可以设置动画。

viewpager动画

目前官网上已经有 ZoomOutPageTransformer 跟 DepthPageTransformer 两种不同viewpager转换页面的动画，都是可以用的，那我就不放了~。
官网网址
想要使用viewpager的动画，程序如下:

final ViewPager viewPager=(ViewPager)findViewById(R.id.viewpager);
viewPager.setPageTransformer(true,new ZoomOutPageTransformer());

自定义动画

先建立MyPageTransformer.class，程序如下:

public class MyPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.9f;
    private static final float ROT_MAX = 10.0f;
        private float mRotAngle;
    @Override
    public void transformPage(@NonNull View page, float position) {

        if (position < -1) {  // [-Infinity,-1) 左边滑到底
            page.setRotation(0);

        } else if (position <= 1) { // [-1,1] fragment1~fragment3之间滑动的动画
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));

            if (position < 0) {//向左滑动
                mRotAngle = (ROT_MAX * position);
                page.setPivotX(page.getMeasuredWidth() * 0.5f);
                page.setPivotY(page.getMeasuredHeight());
                page.setRotation(mRotAngle);
                
                page.setScaleX(scaleFactor);
                page.setScaleY(scaleFactor);
            } else { //向右滑动
                mRotAngle = (ROT_MAX * position);
                page.setPivotX(page.getMeasuredWidth() * 0.5f);
                page.setPivotY(page.getMeasuredHeight());
                page.setRotation(mRotAngle);
                
                page.setScaleX(scaleFactor);
                page.setScaleY(scaleFactor);
            }

        } else { // (1, Infinity] 右边滑到底
            page.setRotation(0);
        }
    }
}

成图:

参考资料:https://codertw.com/android-%E9%96%8B%E7%99%BC/349083/