这效果炸了！自定义仿BiliBili 图片3D切换效果

发表于 1年以前 | 总阅读数：364 次

最近刷B站看到一个比较有意思的图片切换效果，在查看一个用户发的图片的时候是平滑过渡，如果下一张图片是另一个用户发的，则会触发一个3D翻转的效果，不止是图片翻转，连带里面的布局也会一起翻转。

话不多说、先上效果图：

先分析一下这个效果由哪几部分组成：

1.左右平移。
2.上下翻转。

咦。。就这，就这

真就这么简单，先看第一个左右平移，这是一个很普通的ViewPager可以做到的效果，直接使用ViewPager就可以了，下面是使用ViewPager的代码：


        ViewPager vPage = findViewById(R.id.vpage);

        List<Integer> mFragments = new ArrayList<>();
        mFragments.add(R.mipmap.one);
        mFragments.add(R.mipmap.two);
        mFragments.add(R.mipmap.three);
        mFragments.add(R.mipmap.four);
        mFragments.add(R.mipmap.five);

        BliPageAdapter pageAdapter = new BliPageAdapter(this, mFragments);
        vPage.setAdapter(pageAdapter);

这样就可以实现，左右平移的效果了（ViewPager的具体使用参考别的文章或官方文档）

那第二个翻转该怎么实现呢，这才是最主要的，在效果图中可以明显看到3D的效果，那么肯定会用到Camera(非相机)来做，那么3D效果是作用在哪个控件上呢？如果作用到ViewPager上，那么看到的画面就全部是倾斜的，如果作用到图片上，那么只有】图片倾斜，里面的内容不会倾斜，所以判断3D效果是作用在ViewPager的每一个子View上，这样的话，看到的画面是正的，但里面的内容可倾斜可不倾斜，有了这个依据，就可以开始实现了：

1.给ViewPager设置`PageTransformer`用来监听滑动的位置，因为3D效果会根据滑动的位置来决定倾斜的角度。

 vPage.setPageTransformer(false, new BliPageTransformer());
BliPageTransformer 实现了ViewPager.PageTransformer接口:

public class BliPageTransformer implements ViewPager.PageTransformer {

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

    }
}

2.自定义ViewPager子View，因为要在子View的dispatchDraw中对显示的内容做3D变换效果，

我使用的是ConstraintLayout为最外层的容器，所以我自定义BliConstraintLayout继承自ConstraintLayout，重写dispatchDraw方法:

public class BliConstraintLayout extends ConstraintLayout 
   @Override
    protected void dispatchDraw(Canvas canvas) {
        //camera保存状态
        camera.save();
        //camera设置绕Y轴旋转角度
        camera.rotateY(rotateY);
        //将变换应用到canvas上
        camera.applyToCanvas(canvas);
        camera.getMatrix(matrix);
        if (!isLeftRotate){
            //设置靠左进行旋转
            matrix.preTranslate(- getWidth(), - getHeight() >> 1);
            matrix.postTranslate(getWidth(), getHeight() >> 1);
        } else {
            //设置靠右进行旋转
            matrix.preTranslate(0, - getHeight() >> 1);
            matrix.postTranslate(0, getHeight() >> 1);
        }
        canvas.setMatrix(matrix);
        //camera恢复状态
        camera.restore();
        super.dispatchDraw(canvas);
    }

将ViewPager子View的xml文件外层容器替换成自定义的BliConstraintLayout

核心代码就在这里，Camera的用法可以参考其他博客或官方文档，

这里值得注意的是：

1.camera需要保存和恢复状态，不然下一次绘制会拿到上一次改变过的状态。
2.使用matrix对变换矩阵进行平移，因为默认变换都是针对坐标点（0,0）的，而上面的3D效果，需要的是x轴靠左和靠右， y轴居中.
3.这些设置都要放在 super.dispatchDraw(canvas)之前，因为在super.dispatchDraw(canvas)调用后表示界面已经开始绘制的，所以要在绘制之前给它设置成我们需要变换的样子。

在后头看看BliPageTransformer中该怎么设置根据滑动位置设置3D倾斜：

@Override
    public void transformPage(@NonNull View page, float position) {
        BliConstraintLayout bliConstraintLayout = (BliConstraintLayout) page;
        /**
         * 倾斜度
         */
        int tiltDegree = 34;
        float v = position * tiltDegree;
        bliConstraintLayout.setRotateY(v);
        if (position > 0){
            bliConstraintLayout.setIsLeftRotate(true);
        }else{
            bliConstraintLayout.setIsLeftRotate(false);
        }
    }

先看看方法里的参数

page : 当前子View
position：先简单了解一下position：position = -1 当前显示页的上一页。position = 0 当前显示页。position = 1当前显示页的下一页。

那么在滑动到下一页的过程中position的变化就是:

0 -> -1 : 对应page为当前显示页

1 -> 0 :对应page为当前显示页的下一页

获取到对应View之后，再根据position计算对应值：

例如我设置的最大角度为34度，那么在1->0的过程中，角度会由34 -> 0

再判断当前View是当前页，还是下一页，如果是当前页那么是相对布局的右边倾斜，如果是当前页的下一页那么应该相对布局的左边倾斜。

再将计算出的值设置到我们自定义的BliConstraintLayout 中，重绘画布。

下面就可以运行看看效果了：

完美复刻，一键三连。

下面贴一下关键点完整代码：

public class BliPageTransformer implements ViewPager.PageTransformer {

    @Override
    public void transformPage(@NonNull View page, float position) {
        BliConstraintLayout bliConstraintLayout = (BliConstraintLayout) page;
        /**
         * 倾斜度
         */
        int tiltDegree = 34;
        float v = position * tiltDegree;
        bliConstraintLayout.setRotateY(v);
        if (position > 0){
            bliConstraintLayout.setIsLeftRotate(true);
        }else{
            bliConstraintLayout.setIsLeftRotate(false);
        }
    }
}
public class BliConstraintLayout extends ConstraintLayout {

    private float rotateY = 0;

    private boolean isLeftRotate = true;

    private Matrix matrix = new Matrix();

    private Camera camera = new Camera();

    public BliConstraintLayout(@NonNull Context context) {
        super(context);
    }

    public BliConstraintLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public BliConstraintLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        //camera保存状态
        camera.save();
        //camera设置绕Y轴旋转角度
        camera.rotateY(rotateY);
        //将变换应用到canvas上
        camera.applyToCanvas(canvas);
        camera.getMatrix(matrix);
        if (!isLeftRotate){
            //设置靠左进行旋转
            matrix.preTranslate(- getWidth(), - getHeight() >> 1);
            matrix.postTranslate(getWidth(), getHeight() >> 1);
        } else {
            //设置靠右进行旋转
            matrix.preTranslate(0, - getHeight() >> 1);
            matrix.postTranslate(0, getHeight() >> 1);
        }
        canvas.setMatrix(matrix);
        //camera恢复状态
        camera.restore();
        super.dispatchDraw(canvas);
    }

    public void setRotateY(float rotateY){
        this.rotateY = rotateY;
        invalidate();
    }

    public void setIsLeftRotate(boolean isLeft){
        this.isLeftRotate = isLeft;
    }
}

收工。