Android 实现书籍翻页效果

之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫，在Android上也有像laputa和ireader等应用实现有这个特效，在网上搜索了一下好像也没有现成的例子，所以自己动手实现了一个，现在将实现的过程记录下来。

实现真实的翻页效果，为了能在翻页的过程中看到下一页的内容，在翻页之前必须准备两张页面，一张是当前页，另一张是下一页。翻页的过程就是对这两张页面的剪切，组合过程。

用户看到的可以分为3部分：当前页的可见部分(下图绿色部分)，把书页翻起来后看到的背面区域(下图黄色部分)，把书页翻起来后看到的下一页的一角(下图绿色部分)。

假设我们已经求得了包含黄色区域和蓝色区域的Path, 假设为mPath0,那么绿色区域则可以使用Canvas.clipPath(mPath0, Region.Op.XOR)来剪裁绘制；而蓝色区域则可以通过使用(假设黄色区域的Path为mPath1)

Canvas.clipPath(mPath0);   Canvas.clipPath(mPath1, Region.Op.DIFFERENCE); //绘制第一次不同于第二次的区域

对clipPath不是很熟的童鞋可以去复习下 自带apidemo的Clipping例子。

下面我们来研究如何求取mPath0：

上图黄色和蓝色区域的mPath0，可以通过以下获取：

mPath0.moveTo(jx, jy);   mPath0.quadTo(hx, hy, kx, ky);   mPath0.lineTo(ax, ay);   mPath0.lineTo(bx, by);   mPath0.quadTo(ex, ey, cx,cy);      mPath0.lineTo(fx, fy);   mPath0.close();  

接着就是要求出绘制path0所需的各个顶点。

我们已知的条件是：a点坐标(触摸点)，f点坐标(显示界面的大小)，直线eh是af的垂直平分线。

剩下的就变成数学问题啦~~

先来求出g点坐标因为g为af中点：

显然gx=(ax+fx)/2; gy=(ay+fy)/2;

e点坐标：

添加补助线gm，m点坐标为(gx, mHeight);

由相似垂直三角形egm和gmf可知：

em=gm*gm/mf;

这样e点坐标为：(gx-em, mHeight)

同理可以求出h点坐标。

C点坐标：

为简化计算，我们令n点为ag中点，这样有三角形cjf和ehf得：

cx=ex- ef/2 ;

c点坐标为:（ex- ef/2, mHeight）

同理求得j点坐标。

以下推导需要较多的数学知识，不记得的童鞋，自觉复习去~~

一条直线的函数为：

Y=ax+b;

通过已知两点求直线：  a = (y2-y1)/(x2-x1);

b = (x2*y1-y2*x1)/(x2-x1);

两条相交直线交点的坐标为：x= (b2-b1)/(a1-a2);

y=a1x+b1或者y=a2x+b2

综上，4点相交的直线的交点为：

x=( (x4*y3-y4*x3)/(x4-x3)-(x2*y1-y2*x1)/(x2-x1)) /

((y2-y1)/(x2-x1)- (y4-y3)/(x4-x3) )

= ( (x4*y3-y4*x3) (x2-x1)- (x2*y1-y2*x1) (x4-x3) ) /

( (y2-y1) (x4-x3)- (y4-y3) (x2-x1) )

将之前求得的 a,e,c,j四个点带入上式则可以求出 b. 同理可求k点。

d点坐标：

d为pe的中点，所以：

dx=((cx+bx)/2+ex)/2

dy=((cy+by)/2+ey)/2

同理 可求 i 点。

通过上述求解，绘制翻页效果的各个顶点均已得出，剩下的就是贴图，绘制阴影。这部分将在于后的文章中介绍，嘻嘻，喜欢研究的童鞋可以自己试试，懒人们，代码 http://www.linuxidc.com/Linux/2011-04/35227.htm

对于之前发布的翻页效果的源码（http://www.linuxidc.com/Linux/2011-04/35225.htm），由于写得太匆忙，注释讲解的不多，且本人文笔较差，至使很多人对其中的很多部分不是很清楚，尤其是其中的光影部分，而我也不知道如何去向其解释，真是让我汗颜无比，所以今天利用闲暇来给大家分析一下。

相关阅读：

Android 实现书籍翻页效果----原理篇

Android 实现书籍翻页效果----源码篇

ps: 由于零碎时间有限所以文字也有些零碎，望见谅~

首先来分析，翻起页与下一页交汇处的阴影，即下图(红圈标注处):

上图是经过选择canvas.rotate和canvas.clipPath得到的，

canvas.clipPath(mPath0);   canvas.clipPath(mPath1, Region.Op.INTERSECT);   canvas.rotate(mDegrees, mBezierStart1.x, mBezierStart1.y);  

变量标注图：

现在我们来还原未进行上述操作前的样子。得到下图：

蓝色选择区域为mPath0，绿色所选区域为mPath1。执行canvas.clipPath(mPath0)；canvas.clipPath(mPath1, Region.Op.INTERSECT);   即只绘制在mPath0和mPath1相交的区域。蓝色边框和绿色边框相交的区域。

让我们在回到canvas.rotate之前看看。

旋转前阴影的位置位于图片外，图的下边，图中的mDegrees约为-128°，所以执行canvas.rotate(mDegrees, mBezierStart1.x, mBezierStart1.y);即画布逆时针旋转-128°之后即可以得到图中的倾斜的阴影。

图中阴影的宽度为mTouchToCornerDis / 4， 其中mTouchToCornerDis为touch点与其靠近的翻起角的直线距离，这样就可以实现，Touch如果越远离翻起角，那么阴影的宽度就会越大；阴影的长度为mMaxLength，这是屏幕对角线的长度，因为我假定阴影在接近屏幕对角线时到达最大，即我的屏幕是480*800，那么mMaxLength= Math.hypot(480, 800);

哈哈，说道这里大家应该明白了吧，下边的其他阴影效果也是大同小异的。大家可以自己琢磨下。还有就是因为阴影的位置与mBezierStart1.x, mBezierStart1.y是有关联的，当mBezierStart1.x<0且到一定程度时，会出现一些bug，所以我在calcPoints()中，对(mBezierStart1.x < 0 || mBezierStart1.x > 480)进行了限制。如果大家试着屏蔽calcPoints()中if(mBezierStart1.x < 0 || mBezierStart1.x > 480)便会出现以下这种类似的情况。

要如图所示，交汇页的阴影有一半显示不出来，那是因为mBezierStart1.x为负数，之前假定的阴影最大长度是基于mBezierStart1.x最小为0时的，当mBezierStart1.x为负数且小到一定程度时，阴影的长度就不足以绘制完整啦。大家如果需要实现向上图的那种翻页角度的话，需要自己重新计算下阴影绘制的起点坐标。