Android 實現書籍翻頁效果—番外篇之光影效果

By 何明桂（http://blog.csdn.net/hmg25） 轉載請註明出處

       對於之前發布的翻頁效果的源碼，由於寫得太匆忙，注釋講解的不多，且本人文筆較差，至使很多人對其中的很多部分不是很清楚，尤其是其中的光影部分，而我也不知道如何去向其解釋，真是讓我汗顏無比，所以今天利用閑暇來給大家分析一下。

    ps: 由於零碎時間有限所以文字也有些零碎，望見諒~

     首先來分析，翻起頁與下一頁交匯處的陰影，即(紅圈標註處):

                   

   是經過選擇canvas.rotate和canvas.clipPath得到的，

 

view plaincopy to clipboardprint?

1. canvas.clipPath(mPath0);  
2. canvas.clipPath(mPath1, Region.Op.INTERSECT);  
3. 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為負數且小到一定程度時，陰影的長度就不足以繪製完整啦。大家如果需要實現向的那種翻頁角度的話，需要自己重新計算下陰影繪製的起點座標。

O(∩_∩)O哈！ 好啦，就說到這裡，大家如果有什麼不明白，或者代碼中的錯誤，歡迎指出！！