天天看點

Android 實作書籍翻頁效果----源碼篇 完結篇

之前給大家講解了android實作書籍翻頁效果的原理,并在文章結尾處說明要釋出源碼,呵呵,但是最近有不少瑣事纏身,原計劃給大家的源碼demo沒有時間完成,可能要delay啦~~但是由于源碼實作啦原理篇所說的大部分效果,隻是在陰影方面還是有些bug,是以我将它貼出了讓大家都來一起幫忙實作,畢竟授人魚不如授人漁,實踐才是王道。

下面是demo的畫面,可以實作四個角的拖拽:

Android 實作書籍翻頁效果----源碼篇 完結篇

由上圖可以看到,源碼實作啦,翻起頁背面和目前頁的光影效果,但是翻起頁背面的光影效果未實作。

Android 實作書籍翻頁效果----源碼篇 完結篇

紅圈标明處,為翻起頁投射在目前頁上的陰影的頂點沒有定位好,出現的bug,暫時沒有時間來修改,需要等手上瑣事完成啦在繼續,歡迎大家來修改,最好将修改點,也開源告訴大家聽~~

源碼位址: http://download.csdn.net/source/3186092

之前由于種種瑣事,暫停了這個翻頁效果的實作,終于在這周末完成了大部分功能,但是這裡隻是給出了一個基本的雛形,沒有添加翻頁的動畫效果,由于下個周末開始,需要轉向去研究framework層(短暫的醬油期就這樣結束啦 o(︶︿︶)o唉),将會暫停翻頁的開發,是以想要進一步提高功能的童鞋需要自己動手~~~稍後釋出的将是本人提供的完結篇代碼。 

今天一個熱心的csdn好友-- xiaofanqingzjj 告訴我:“這兩天把你的代碼整了一下,實作了 根據滑動速度或位置翻頁自動彈回,或者自動翻轉到下一頁的動畫,等整好了,再釋出上來”, 呵呵,感想他的熱心,也希望以後大家有什麼好的改進也可以釋出出來讓大家都可以一起學習下。

閑話少說,在最後關頭和大家說說完結篇代碼裡的改進 ,上圖看效果:

Android 實作書籍翻頁效果----源碼篇 完結篇
Android 實作書籍翻頁效果----源碼篇 完結篇

有圖可以看到,首先是修複了之前翻起頁陰影頂點,定位異常的問題,然後是添加了翻起頁背面的顯示,以及光影效果,并且修複了,放翻頁趨向于垂直方向時,光影效果出現的漂移現象。

文章後邊已經上傳翻頁效果的源碼了,我這裡不詳細講太多,稍後有時間的話,我會把光影效果這部分代碼的原理,另外寫一篇部落格。下面隻是給個概述,友善大家研究代碼。

首先分析陰影頂點的定位問題,先來看一種特殊情況:

Android 實作書籍翻頁效果----源碼篇 完結篇

假設直線aT處于垂直位置,兩邊陰影寬度都為一緻,假設為25px, 容易得aT為25*√2=25*1.414,那麼處于這種特殊情況下的頂點為:

a.x=T.x;

a.y=T.y-25*1.414

現在我們來看一般性情況:

Android 實作書籍翻頁效果----源碼篇 完結篇

AT依舊為25*1.414,那麼如果要定位A點的坐标,就需要求出AB和BT的長度(AB垂直于BT),通過分析可以知道夾角BAT,等于45度角加上夾腳DTE,而夾腳DTE是可以通過Touch點和mBezierControl1的坐标求出的:

Math.atan2(mBezierControl1.y - mTouch.y, mTouch.x- mBezierControl1.x);

通過以上計算就可以求出陰影頂點坐标了。

翻起頁背面分為兩部分求解,第一部分是将原圖翻轉得到:

Android 實作書籍翻頁效果----源碼篇 完結篇

以上效果是通過建立一個Matrix mMatrix和float[] mMatrixArray 實作

mMatrix.setValues(mMatrixArray);

mMatrix.preTranslate(-mBezierControl1.x, -mBezierControl1.y);

mMatrix.postTranslate(mBezierControl1.x, mBezierControl1.y);

翻轉之後為了實作翻起後的光影效果,需要使用 ColorMatrixFilter ,實作以下效果,對這兩個不熟的自己找資料研究去~~~╭(╯^╰)╮

Android 實作書籍翻頁效果----源碼篇 完結篇

呵呵,大概就是這些個内容了,具體的自己研究代碼去~~下邊給出一個程式中各個點的标示,友善研究:

Android 實作書籍翻頁效果----源碼篇 完結篇

源碼位址:http://download.csdn.net/source/3216809

希望大家也把自己改動的地方釋出出來一起研究。

PS:我新寫了一篇部落格,在部落格中對原來地翻頁進行了更新,添加了翻頁動畫效果,并且新添加了一個類,用于讀取SD卡中對txt

文本,實作了一個簡易的電子書閱讀器。請有興趣對童鞋,移步至:http://blog.csdn.net/hmg25/archive/2011/05/14/6419694.aspx

轉載:http://blog.csdn.net/hmg25