从零开始实现书籍翻页效果（四）_H5之家 - 中国HTML5教程资源分享第一站

版权声明：本文为博主原创文章，未经博主允许不得转载。
系列教程：Android开发之从零开始系列
源码：github.com/AnliaLee/BookPage，欢迎star

大家要是看到有错误的地方或者有啥好的建议，欢迎留言评论

前言：本期是从零开始实现书籍翻页效果原理篇的最后一期，我们要把剩下的翻页阴影补全（后续优化会以番外篇的形式不定期更新）。绘制阴影效果的方案非常多，贴近现实的光影效果需要大家一点点慢慢调试。这里给出我个人的方案以及原理解析，供大家参考

本篇只着重于思路和实现步骤，里面用到的一些知识原理不会非常细地拿来讲，如果有不清楚的api或方法可以在网上搜下相应的资料，肯定有大神讲得非常清楚的，我这就不献丑了。本着认真负责的精神我会把相关知识的博文链接也贴出来（其实就是懒不想写那么多哈哈），大家可以自行传送。为了照顾第一次阅读系列博客的小伙伴，本篇会出现一些在之前系列博客就讲过的内容，看过的童鞋自行跳过该段即可

国际惯例，先上效果图

目录划分阴影区域

我们先来简单回顾一下各标志点位置以及区域的划分（详情请见Android自定义View——从零开始实现书籍翻页效果（一））。各标识点位置如下

当我们进行翻页操作时，View分为三个区域，分别是A区域（当前页），B区域（下一页），C区域（当前页背面），如下图所示

那么以这三个区域的划分为基准，阴影落在哪个区域就属于哪个区域的阴影，共分为A左阴影区域、A右阴影区域、B阴影区域、C阴影区域，具体阴影划分如下图所示

我们从最简单的B区域阴影开始，分析绘制阴影效果的原理

绘制下一页（B区域）的阴影

按需求，当f点位于右下角时，阴影区域是从直线cj出发，垂直于cj向右下角方向绘制一段距离，距离随af的距离增大而增大，且颜色由深到浅线性渐变。利用GradientDrawable方面的知识我们可以绘制出一个颜色线性渐变的矩形，但是GradientDrawable的setBounds方法只能设置一个各边与XY轴平行或垂直的矩形，因此我们还需要用canvas.rotate方法旋转画布的坐标轴，使得绘制出来的阴影矩形一边（深色出发的那一边）与cj重合，具体实现如下图所示（渣画工凑合着看吧┑(￣Д ￣)┍）

图中左下方的矩形就是我们的阴影矩形，其中短边长度为af长度的四分之一（可根据需求调整），长边长度为整个View的对角线长度（因为cj不可能超过此长度），颜色由cc 出发，向X轴负方向由深到浅线性渐变。然后以c点为中心旋转角c cj的角度，使得cc 与cj重合，即可绘制出我们想要的阴影区域。那角c cj的角度怎么求呢？由图我们可以知道cc 是逆时针旋转的，且因为cj与eh平行，所以角jcf与角hef相等，即角c cj = 90° + 角hef。我们结合Math.toDegrees和Math.atan2方法计算这个角度，因为是逆时针旋转，所以旋转角度是负的，则h、e、f三点在角度计算坐标轴的位置如下图所示

则旋转角度公式为

float rotateDegrees = (float) Math.toDegrees(Math.atan2(e.x- f.x, h.y - f.y));

同理，当f点在右上角时也是这样计算，区别在于阴影矩形的left和right因旋转角度少了90°会有所不同，具体旋转过程大家可以自己画图分析。原理分析完毕，开始敲代码。修改BookPageView，增加绘制B区域阴影的方法

/** * 绘制B区域内容 * @param canvas * @param pathPaint * @param pathA */ private void drawPathBContent(Canvas canvas, Path pathA, Paint pathPaint){ Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565); Canvas contentCanvas = new Canvas(contentBitmap); //下面开始绘制区域内的内容... contentCanvas.drawPath(getPathB(),pathPaint); contentCanvas.drawText("这是在B区域的内容...BBBB", viewWidth-260, viewHeight-100, textPaint); //结束绘制区域内的内容... canvas.save(); canvas.clipPath(pathA);//裁剪出A区域 canvas.clipPath(getPathC(),Region.Op.UNION);//裁剪出A和C区域的全集 canvas.clipPath(getPathB(), Region.Op.REVERSE_DIFFERENCE);//裁剪出B区域中不同于与AC区域的部分 canvas.drawBitmap(contentBitmap, 0, 0, null); //为了更好地观察在不裁剪时阴影区域的范围，重置一下画布 canvas.restore(); canvas.save(); drawPathBShadow(canvas);//调用阴影绘制方法 canvas.restore(); } /** * 绘制B区域阴影，阴影左深右浅 * @param canvas */ private void drawPathBShadow(Canvas canvas){ int deepColor = 0xff111111;//为了让效果更明显使用此颜色代码，具体可根据实际情况调整 // int deepColor = 0x55111111; int lightColor = 0x00111111; int[] gradientColors = new int[] {deepColor,lightColor};//渐变颜色数组 int deepOffset = 0;//深色端的偏移值 int lightOffset = 0;//浅色端的偏移值 float aTof =(float) Math.hypot((a.x - f.x),(a.y - f.y));//a到f的距离 float viewDiagonalLength = (float) Math.hypot(viewWidth, viewHeight);//对角线长度 int left; int right; int top = (int) c.y; int bottom = (int) (viewDiagonalLength + c.y); GradientDrawable gradientDrawable; if(style.equals(STYLE_TOP_RIGHT)){//f点在右上角 //从左向右线性渐变 gradientDrawable =new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,gradientColors); gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);//线性渐变 left = (int) (c.x - deepOffset);//c点位于左上角 right = (int) (c.x + aTof/4 + lightOffset); }else { //从右向左线性渐变 gradientDrawable =new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT,gradientColors); gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT); left = (int) (c.x - aTof/4 - lightOffset);//c点位于左下角 right = (int) (c.x + deepOffset); } gradientDrawable.setBounds(left,top,right,bottom);//设置阴影矩形 float rotateDegrees = (float) Math.toDegrees(Math.atan2(e.x- f.x, h.y - f.y));//旋转角度 canvas.rotate(rotateDegrees, c.x, c.y);//以c为中心点旋转 gradientDrawable.draw(canvas); }

不裁剪阴影区域的效果如图

注释掉我们试验用的代码

最终效果如下

绘制当前页背面（C区域）的阴影