教你仿写 Flipboard 的翻页效果

前言

自从清明放假之后，状态就一直一般般，（放假使我快乐，不要上学，我要放假！）导致更文也断了一段时间，鸽了好一段时间。痛定思痛，最近决定重新恢复更文。鉴于前段时间在学习扔物线大大 HenCoder 的自定义View系列文章，看到其中给出了一些可供仿写的酷界面，打算尝试仿写其中的 Flipboard 红板报的翻页效果（加强版）

动画效果如下：

分析

• 核心：图片本身不旋转，旋转的是”翻折的 canvas “，在处理过后的canvas中绘制图片
  
  1. ”右侧”（指 最开始 “翻折的 canvas”）翻折一定角度，”左侧”（指 最后 “翻折的 canvas”）无变化，分别绘制；
  2. 将 “右侧” 旋转 270°，”左侧” 配合旋转，分别绘制；
  3. “右侧”无变化， “左侧” 翻折一定角度

• 涉及知识点
  

  1. 属性动画 的使用，不了解的可以看我的另一篇分享Android 属性动画
  2. canvas 的使用，主要是 几何变换
  3. camera 的 旋转 和 平移
  4. 关关关键 要区别二者的 坐标系，这一点很重要，不了解清楚可能做出来的效果面目全非，别问我怎么知道的。。。。
     

  上述不清楚的，或者想要深入学习自定义View的，推荐大家去 扔物线大大的 HenCoder 专栏学习一波

• 简要流程图
  就简单解释一下旋转到90度时的处理流程（没找到方便的画图软件，很难受，读者有合适的给推荐一哈啊~）
  

  1. 图一为正常状态下的坐标系，灰色部分表示当前canvas
  2. 图二：假定此时进行到动画2，且旋转到90度，canvas的坐标系旋转90度，然后绕camera的y轴旋转一定角度，应用到canvas后，canvas变为图中红+粉色那个样子(现需要注意二者坐标系，图中仅仅标识canvas的坐标系)
  3. 然而我们只需要翻折的那部分用来绘制翻折起来的图片，因此对红色部分进行裁切。
  4. 图三：而由于我们原本的图片是不进行旋转的，因此我们需要将坐标系还原回来，这样我们绘制图片时候，就只会在红色翻折起来的canvas中绘制。

  剩下的另一半原理也是一样的，大家自己脑补吧。。

  （不知道合适的绘图软件，用windows自带的画图实在太难受。。）

实现

Demo地址 FilpboardAnimation

直接放代码吧，注释比较详细，对比上面的分析，不难理解。

MapView.java

public class MapView extends View {

    //“右侧” 沿Y轴翻折的角度
    private float degreeY;

    //canvas 旋转的角度
    private float degreeZ;

    //“左侧” 最后翻折的角度
    private float fixY;

    private Paint mPaint;
    private Bitmap mBitmap;
    private Camera mCamera;

    public MapView(Context context) {
        this(context,null);
    }

    public MapView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public MapView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.MapView);
        BitmapDrawable drawable = (BitmapDrawable) a.getDrawable(R.styleable.MapView_mv_background);
        a.recycle();
        if (drawable!=null){
            mBitmap = drawable.getBitmap();
        }else {
            mBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.flip_board);
        }

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mCamera = new Camera();

        //沿Z轴平移，防止相机旋转后图片“糊”到脸上
        DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        float newZ = - displayMetrics.density * 6;
        mCamera.setLocation(0,0,newZ);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int bitmapWidth = mBitmap.getWidth();
        int bitmapHeight = mBitmap.getHeight();
        int centerX = getWidth()/2;
        int centerY = getHeight()/2;

        //绘制 翻折&旋转 部分
        canvas.save();
        mCamera.save();
        canvas.translate(centerX,centerY);//画布移动到屏幕中心
        //“折线及翻折部分的画布” 的旋转
        canvas.rotate(-degreeZ);//画布旋转
        mCamera.rotateY(degreeY);//相机绕Y周旋转
        mCamera.applyToCanvas(canvas);//相机应用到画布
        canvas.clipRect(0,-centerY,centerX,centerY);//画布裁切，只绘制翻折起来的部分
        //因为翻折部分相对于画布而言，坐标始终未改变

        canvas.rotate(degreeZ);//将画布旋转为原角度，否则绘制时绘制的图片也会旋转
        mCamera.restore();
        canvas.drawBitmap(mBitmap,-bitmapWidth/2,-bitmapHeight/2,mPaint);//绘制图片，注意坐标
        canvas.restore();

        //绘制 剩余 部分
        canvas.save();
        mCamera.save();
        canvas.translate(centerX,centerY);//移动到画布中心
        //“折线以及最后才翻折的画布”的旋转
        canvas.rotate(-degreeZ);//画布旋转
        canvas.clipRect(-centerX,-centerY,0,centerY);//裁切绘制范围
        mCamera.rotateY(fixY);//将旋转之后才需要翻折的部分 进行旋转
        mCamera.applyToCanvas(canvas);
        canvas.rotate(degreeZ);//画布还原回原本角度
        mCamera.restore();
        canvas.drawBitmap(mBitmap,-bitmapWidth/2,-bitmapHeight/2,mPaint);//绘制图片，注意坐标
        canvas.restore();

    }

    public void reset(){
        degreeY = 0;
        degreeZ = 0;
        fixY = 0;
    }
    public void setDegreeY(float degreeY) {
        this.degreeY = degreeY;
        invalidate();
    }

    public void setDegreeZ(float degreeZ) {
        this.degreeZ = degreeZ;
        invalidate();
    }

    public void setFixY(float fixY) {
        this.fixY = fixY;
        invalidate();
    }

}

MainActivity.java

public class MainActivity extends AppCompatActivity {

    MapView mMapView;
    private Handler mHandler = new Handler();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mMapView = findViewById(R.id.map_view);

        //三段动画
        //1."右侧" 翻折，"左侧" 不动
        //2."右侧" 旋转，"左侧" 配合旋转
        //3.收尾 "左侧" 翻折，"右侧" 不动
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(mMapView,"degreeY",0,-45);
        animator1.setDuration(1000);
        animator1.setStartDelay(500);

        ObjectAnimator animator2 = ObjectAnimator.ofFloat(mMapView,"degreeZ",0,270);
        animator2.setDuration(800);
        animator2.setStartDelay(500);

        ObjectAnimator animator3 = ObjectAnimator.ofFloat(mMapView,"fixY",0,30);
        animator3.setDuration(500);
        animator3.setStartDelay(500);

        final AnimatorSet animatorSet = new AnimatorSet();
        //循环播放
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                /*
                //用handler的目的在这里只是为了模拟 原图中，在动画最后短暂停留
                mHandler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                            */
                                //将属性重置
                                mMapView.reset();
                                animatorSet.start();
                            }
                        });
        /*
                    }
                },500);
            }
        });
        */

        //顺序播放动画
        animatorSet.playSequentially(animator1,animator2,animator3);
        animatorSet.start();
    }
}

效果如下
Android studio自带的模拟器在我电脑里超级卡，录屏瑕疵很大，大家随便看一看就好

建议大家自己实现一下，运行看看实际效果，虽然东西虽小，但成就感还是很重要的不是么，哈哈~

好了，效果实现了，本文也就到此结束了。

---

总结

• 本文仿写了一个简易的Flipboard翻页效果，后续可能仿写其他常用不常用的view，望多多支持。
• 笔者水平有限，如有错漏，欢迎指正。
• 接下来我也会将所学的知识分享出来，有兴趣可以继续关注whd_Alive的Android开发笔记
• 不定期分享Android开发相关的技术干货，期待与你的交流，共勉。