版權宣告：本文為博主原創文章，未經博主允許不得轉載
系列教程：Android開發之從零開始系列
原始碼：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);
}
複製程式碼不裁剪陰影區域的效果如圖
註釋掉我們試驗用的程式碼
/**
* 繪製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();
}
複製程式碼最終效果如下
繪製當前頁背面（C區域）的陰影
由之前這張圖可以看出來C區域陰影的繪製過程其實是和B區域差不多的，不同的地方在於顏色由深到淺的漸變方向變成垂直cj向a點方向，且陰影矩形的短邊長度變為與ce或jh（取短的那個）長度相關，因為原理一樣，就不再贅述了，下面是繪製C區域陰影的程式碼（注意對比分析不同於繪製B區域陰影方法的地方）
/**
* 繪製C區域內容
* @param canvas
* @param pathA
* @param pathPaint
*/
private void drawPathCContent(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);//繪製一個背景，path用B的就行
contentCanvas.drawText("這是在A區域的內容...AAAA", viewWidth-260, viewHeight-100, textPaint);
//結束繪製區域內的內容...
canvas.save();
canvas.clipPath(pathA);
canvas.clipPath(getPathC(), Region.Op.REVERSE_DIFFERENCE);//裁剪出C區域不同於A區域的部分
float eh = (float) Math.hypot(f.x - e.x,h.y - f.y);
float sin0 = (f.x - e.x) / eh;
float cos0 = (h.y - f.y) / eh;
//設定翻轉和旋轉矩陣
float[] mMatrixArray = { 0, 0, 0, 0, 0, 0, 0, 0, 1.0f };
mMatrixArray[0] = -(1-2 * sin0 * sin0);
mMatrixArray[1] = 2 * sin0 * cos0;
mMatrixArray[3] = 2 * sin0 * cos0;
mMatrixArray[4] = 1 - 2 * sin0 * sin0;
Matrix mMatrix = new Matrix();
mMatrix.reset();
mMatrix.setValues(mMatrixArray);//翻轉和旋轉
mMatrix.preTranslate(-e.x, -e.y);//沿當前XY軸負方向位移得到 矩形A₃B₃C₃D₃
mMatrix.postTranslate(e.x, e.y);//沿原XY軸方向位移得到 矩形A4 B4 C4 D4
canvas.drawBitmap(contentBitmap, mMatrix, null);
drawPathCShadow(canvas);//呼叫繪製陰影方法
canvas.restore();
}
/**
* 繪製C區域陰影，陰影左淺右深
* @param canvas
*/
private void drawPathCShadow(Canvas canvas){
int deepColor = 0xff111111;//為了讓效果更明顯使用此顏色程式碼，具體可根據實際情況調整
// int deepColor = 0x55333333;
int lightColor = 0x00333333;
int[] gradientColors = {lightColor,deepColor};//漸變顏色陣列
int deepOffset = 1;//深色端的偏移值
int lightOffset = -30;//淺色端的偏移值
float viewDiagonalLength = (float) Math.hypot(viewWidth, viewHeight);//view對角線長度
int midpoint_ce = (int) (c.x + e.x) / 2;//ce中點
int midpoint_jh = (int) (j.y + h.y) / 2;//jh中點
float minDisToControlPoint = Math.min(Math.abs(midpoint_ce - e.x), Math.abs(midpoint_jh - h.y));//中點到控制點的最小值
int left;
int right;
int top = (int) c.y;
int bottom = (int) (viewDiagonalLength + c.y);
GradientDrawable gradientDrawable;
if (style.equals(STYLE_TOP_RIGHT)) {
gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
left = (int) (c.x - lightOffset);
right = (int) (c.x + minDisToControlPoint + deepOffset);
} else {
gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT, gradientColors);
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
left = (int) (c.x - minDisToControlPoint - deepOffset);
right = (int) (c.x + lightOffset);
}
gradientDrawable.setBounds(left,top,right,bottom);
float mDegrees = (float) Math.toDegrees(Math.atan2(e.x- f.x, h.y - f.y));
canvas.rotate(mDegrees, c.x, c.y);
gradientDrawable.draw(canvas);
}
複製程式碼效果如圖
繪製當前頁（A區域）的陰影
當從右上或右下翻頁時，A區域的陰影由兩部分組成，這在之前的圖中已經標出來了。根據陰影效果的需求，方案不同，繪製的複雜度也不同，這裡就以我自己的方案為例進行講解
先來看左邊部分的陰影區域，按照之前繪製陰影過程的分析，我們直接代入相關條件即可。此時陰影矩形短邊長度為d點到直線ae的距離的二分之一，旋轉中心為e，旋轉角度為Math.toDegrees(Math.atan2(e.x-a.x, a.y-e.y))，根據條件，修改BookPageView
public class BookPageView extends View {
//省略部分程式碼...
float lPathAShadowDis = 0;//A區域左陰影矩形短邊長度參考值
/**
* 繪製A區域內容
* @param canvas
* @param pathA
* @param pathPaint
*/
private void drawPathAContent(Canvas canvas, Path pathA, Paint pathPaint){
Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
Canvas contentCanvas = new Canvas(contentBitmap);
//下面開始繪製區域內的內容...
contentCanvas.drawPath(pathA,pathPaint);
contentCanvas.drawText("這是在A區域的內容...AAAA", viewWidth-260, viewHeight-100, textPaint);
//結束繪製區域內的內容...
canvas.save();
canvas.clipPath(pathA, Region.Op.INTERSECT);//對繪製內容進行裁剪，取和A區域的交集
canvas.drawBitmap(contentBitmap, 0, 0, null);
drawPathALeftShadow(canvas,pathA);
canvas.restore();
}
/**
* 繪製A區域左陰影
* @param canvas
*/
private void drawPathALeftShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int deepColor = 0x33333333;
int lightColor = 0x01333333;
int[] gradientColors = {lightColor,deepColor};//漸變顏色陣列
int left;
int right;
int top = (int) e.y;
int bottom = (int) (e.y+viewHeight);
GradientDrawable gradientDrawable;
if (style.equals(STYLE_TOP_RIGHT)) {
gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
left = (int) (e.x - lPathAShadowDis /2);
right = (int) (e.x);
} else {
gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT, gradientColors);
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
left = (int) (e.x);
right = (int) (e.x + lPathAShadowDis /2);
}
gradientDrawable.setBounds(left,top,right,bottom);
float mDegrees = (float) Math.toDegrees(Math.atan2(e.x-a.x, a.y-e.y));
canvas.rotate(mDegrees, e.x, e.y);
gradientDrawable.draw(canvas);
}
/**
* 計算各點座標
* @param a
* @param f
*/
private void calcPointsXY(MyPoint a, MyPoint f){
//省略部分程式碼...
//計算d點到直線ae的距離
float lA = a.y-e.y;
float lB = e.x-a.x;
float lC = a.x*e.y-e.x*a.y;
lPathAShadowDis = Math.abs((lA*d.x+lB*d.y+lC)/(float) Math.hypot(lA,lB));
}
}
複製程式碼效果如圖
同理，右邊陰影的繪製也是這樣代入相應條件：陰影矩形短邊長度為i點到直線ah的距離的二分之一，旋轉中心為h，旋轉角度為Math.toDegrees(Math.atan2(a.y-h.y, a.x-h.x))，根據條件修改BookPageView
public class BookPageView extends View {
//省略部分程式碼...
float rPathAShadowDis = 0;//A區域右陰影矩形短邊長度參考值
/**
* 繪製A區域內容
* @param canvas
* @param pathA
* @param pathPaint
*/
private void drawPathAContent(Canvas canvas, Path pathA, Paint pathPaint){
Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
Canvas contentCanvas = new Canvas(contentBitmap);
//下面開始繪製區域內的內容...
contentCanvas.drawPath(pathA,pathPaint);
contentCanvas.drawText("這是在A區域的內容...AAAA", viewWidth-260, viewHeight-100, textPaint);
//結束繪製區域內的內容...
canvas.save();
canvas.clipPath(pathA, Region.Op.INTERSECT);//對繪製內容進行裁剪，取和A區域的交集
canvas.drawBitmap(contentBitmap, 0, 0, null);
drawPathALeftShadow(canvas,pathA);
drawPathARightShadow(canvas,pathA);
canvas.restore();
}
/**
* 繪製A區域右陰影
* @param canvas
*/
private void drawPathARightShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int deepColor = 0x33333333;
int lightColor = 0x01333333;
int[] gradientColors = {deepColor,lightColor,lightColor};//漸變顏色陣列
float viewDiagonalLength = (float) Math.hypot(viewWidth, viewHeight);//view對角線長度
int left = (int) h.x;
int right = (int) (h.x + viewDiagonalLength*10);//需要足夠長的長度
int top;
int bottom;
GradientDrawable gradientDrawable;
if (style.equals(STYLE_TOP_RIGHT)) {
gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.BOTTOM_TOP, gradientColors);
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
top = (int) (h.y- rPathAShadowDis /2);
bottom = (int) h.y;
} else {
gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, gradientColors);
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
top = (int) h.y;
bottom = (int) (h.y+ rPathAShadowDis /2);
}
gradientDrawable.setBounds(left,top,right,bottom);
float mDegrees = (float) Math.toDegrees(Math.atan2(a.y-h.y, a.x-h.x));
canvas.rotate(mDegrees, h.x, h.y);
gradientDrawable.draw(canvas);
}
/**
* 計算各點座標
* @param a
* @param f
*/
private void calcPointsXY(MyPoint a, MyPoint f){
//省略部分程式碼...
//計算i點到ah的距離
float rA = a.y-h.y;
float rB = h.x-a.x;
float rC = a.x*h.y-h.x*a.y;
rPathAShadowDis = Math.abs((rA*i.x+rB*i.y+rC)/(float) Math.hypot(rA,rB));
}
}
複製程式碼效果如圖
最後裁剪出我們要的區域即可（裁剪區域見程式碼），修改BookPageView
/**
* 繪製A區域左陰影
* @param canvas
*/
private void drawPathALeftShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int deepColor = 0x33333333;
int lightColor = 0x01333333;
int[] gradientColors = {lightColor,deepColor};//漸變顏色陣列
int left;
int right;
int top = (int) e.y;
int bottom = (int) (e.y+viewHeight);
GradientDrawable gradientDrawable;
if (style.equals(STYLE_TOP_RIGHT)) {
gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
left = (int) (e.x - lPathAShadowDis /2);
right = (int) (e.x);
} else {
gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT, gradientColors);
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
left = (int) (e.x);
right = (int) (e.x + lPathAShadowDis /2);
}
//裁剪出我們需要的區域
Path mPath = new Path();
mPath.moveTo(a.x- Math.max(rPathAShadowDis, lPathAShadowDis) /2,a.y);
mPath.lineTo(d.x,d.y);
mPath.lineTo(e.x,e.y);
mPath.lineTo(a.x,a.y);
mPath.close();
canvas.clipPath(pathA);
canvas.clipPath(mPath, Region.Op.INTERSECT);
float mDegrees = (float) Math.toDegrees(Math.atan2(e.x-a.x, a.y-e.y));
canvas.rotate(mDegrees, e.x, e.y);
gradientDrawable.setBounds(left,top,right,bottom);
gradientDrawable.draw(canvas);
}
/**
* 繪製A區域右陰影
* @param canvas
*/
private void drawPathARightShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int deepColor = 0x33333333;
int lightColor = 0x01333333;
int[] gradientColors = {deepColor,lightColor,lightColor};//漸變顏色陣列
float viewDiagonalLength = (float) Math.hypot(viewWidth, viewHeight);//view對角線長度
int left = (int) h.x;
int right = (int) (h.x + viewDiagonalLength*10);//需要足夠長的長度
int top;
int bottom;
GradientDrawable gradientDrawable;
if (style.equals(STYLE_TOP_RIGHT)) {
gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.BOTTOM_TOP, gradientColors);
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
top = (int) (h.y- rPathAShadowDis /2);
bottom = (int) h.y;
} else {
gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, gradientColors);
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
top = (int) h.y;
bottom = (int) (h.y+ rPathAShadowDis /2);
}
gradientDrawable.setBounds(left,top,right,bottom);
//裁剪出我們需要的區域
Path mPath = new Path();
mPath.moveTo(a.x- Math.max(rPathAShadowDis, lPathAShadowDis) /2,a.y);
// mPath.lineTo(i.x,i.y);
mPath.lineTo(h.x,h.y);
mPath.lineTo(a.x,a.y);
mPath.close();
canvas.clipPath(pathA);
canvas.clipPath(mPath, Region.Op.INTERSECT);
float mDegrees = (float) Math.toDegrees(Math.atan2(a.y-h.y, a.x-h.x));
canvas.rotate(mDegrees, h.x, h.y);
gradientDrawable.draw(canvas);
}
複製程式碼效果如圖
最後是水平翻頁的陰影，此陰影屬於A區域右陰影的特殊情況，其繪製條件為：陰影矩形短邊長度為i點到直線ah的距離的二分之一（最大不超過30，最大值可按需求調整），旋轉中心為a，旋轉角度為Math.toDegrees(Math.atan2(f.x-a.x,f.y-h.y))，根據條件修改BookPageView
/**
* 繪製A區域內容
* @param canvas
* @param pathA
* @param pathPaint
*/
private void drawPathAContent(Canvas canvas, Path pathA, Paint pathPaint){
Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
Canvas contentCanvas = new Canvas(contentBitmap);
//下面開始繪製區域內的內容...
contentCanvas.drawPath(pathA,pathPaint);
contentCanvas.drawText("這是在A區域的內容...AAAA", viewWidth-260, viewHeight-100, textPaint);
//結束繪製區域內的內容...
canvas.save();
canvas.clipPath(pathA, Region.Op.INTERSECT);//對繪製內容進行裁剪，取和A區域的交集
canvas.drawBitmap(contentBitmap, 0, 0, null);
if(style.equals(STYLE_LEFT) || style.equals(STYLE_RIGHT)){//左右水平翻頁
drawPathAHorizontalShadow(canvas,pathA);
}else {//上下翻頁
drawPathALeftShadow(canvas,pathA);
drawPathARightShadow(canvas,pathA);
}
canvas.restore();
}
/**
* 繪製A區域水平翻頁陰影
* @param canvas
*/
private void drawPathAHorizontalShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int deepColor = 0x44333333;
int lightColor = 0x01333333;
int[] gradientColors = {lightColor,deepColor};//漸變顏色陣列
GradientDrawable gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
int maxShadowWidth = 30;//陰影矩形最大的寬度
int left = (int) (a.x - Math.min(maxShadowWidth,(rPathAShadowDis/2)));
int right = (int) (a.x);
int top = 0;
int bottom = viewHeight;
gradientDrawable.setBounds(left,top,right,bottom);
canvas.clipPath(pathA, Region.Op.INTERSECT);
float mDegrees = (float) Math.toDegrees(Math.atan2(f.x-a.x,f.y-h.y));
canvas.rotate(mDegrees, a.x, a.y);
gradientDrawable.draw(canvas);
}
複製程式碼效果如圖
最後調整一下顏色，看下最終效果圖
至此本篇教程到此結束，翻頁效果各部分我們已經一一拆解進行了分析和實現。“房子”建好了，接下來自然是要“裝修房子”，在下期我們將對這個View進行效能優化 (～￣▽￣)～。如果大家看了感覺還不錯麻煩點個贊，你們的支援是我最大的動力~