教你仿写 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 <