Android 實現書籍翻頁效果----原理篇

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

    之前看到像ipad上的ibook的模擬書籍翻頁的特效感覺很炫,在android上也有像laputaireader等應用實現有這個特效,在網上搜索了一下好像也沒有現成的例子,所以自己動手實現了一個,現在將實現的過程記錄下來。

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

實現真實的翻頁效果,爲了能在翻頁的過程中看到下一頁的內容,在翻頁之前必須準備兩張頁面,一張是當前頁,另一張是下一頁。翻頁的過程就是對這兩張頁面的剪切,組合過程。

用戶看到的可以分爲3部分:當前頁的可見部分(下圖綠色部分)把書頁翻起來後看到的背面區域(下圖黃色部分),把書頁翻起來後看到的下一頁的一角(下圖綠色部分)

           

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

假設我們已經求得了包含黃色區域和藍色區域的Path, 假設爲mPath0,那麼綠色區域則可以使用Canvas.clipPath(mPath0, Region.Op.XOR)來剪裁繪製;而藍色區域則可以通過使用(假設黃色區域的PathmPath1) 

       

  clipPath不是很熟的童鞋可以去複習下 自帶apidemoClipping例子。

 

下面我們來研究如何求取mPath0

          

上圖黃色和藍色區域的mPath0,可以通過以下獲取:

 

接着就是要求出繪製path0所需的各個頂點。

我們已知的條件是:a點座標(觸摸點)f點座標(顯示界面的大小),直線ehaf的垂直平分線。

剩下的就變成數學問題啦~~

先來求出g點座標因爲gaf中點:

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

e點座標:

    添加補助線gmm點座標爲(gx, mHeight);

    由相似垂直三角形egmgmf可知:

      em=gm*gm/mf;

這樣e點座標爲:(gx-em, mHeight)

同理可以求出h點座標。

C點座標:

爲簡化計算,我們令n點爲ag中點,這樣有三角形cjfehf得:

     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點座標:

dpe的中點,所以:

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

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

同理 可求 i 點。

     通過上述求解,繪製翻頁效果的各個頂點均已得出,剩下的就是貼圖,繪製陰影。這部分將在於後的文章中介紹,嘻嘻,喜歡研究的童鞋可以自己試試,懶人們,可以等等,明天整理好代碼後貼出~~~

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章