Android 实现书籍翻页效果----源码篇 完结篇

本文分享了Android书籍翻页效果的改进,包括阴影顶点定位、背面显示及光影效果修复。提供了源码及后续改进方向,鼓励社区共同参与优化。


之前给大家讲解了android实现书籍翻页效果的原理,并在文章结尾处说明要发布源码,呵呵,但是最近有不少琐事缠身,原计划给大家的源码demo没有时间完成,可能要delay啦~~但是由于源码实现啦原理篇所说的大部分效果,只是在阴影方面还是有些bug,所以我将它贴出了让大家都来一起帮忙实现,毕竟授人鱼不如授人渔,实践才是王道。


下面是demo的画面,可以实现四个角的拖拽:






由上图可以看到,源码实现啦,翻起页背面和当前页的光影效果,但是翻起页背面的光影效果未实现。




红圈标明处,为翻起页投射在当前页上的阴影的顶点没有定位好,出现的bug,暂时没有时间来修改,需要等手上琐事完成啦在继续,欢迎大家来修改,最好将修改点,也开源告诉大家听~~



源码地址: http://download.youkuaiyun.com/source/3186092



之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添加翻页的动画效果,由于下个周末开始,需要转向去研究framework层(短暂的酱油期就这样结束啦 o(︶︿︶)o唉),将会暂停翻页的开发,所以想要进一步提高功能的童鞋需要自己动手~~~稍后发布的将是本人提供的完结篇代码。 

今天一个热心的csdn好友-- xiaofanqingzjj 告诉我:“这两天把你的代码整了一下,实现了 根据滑动速度或位置翻页自动彈回,或者自动翻转到下一页的动画,等整好了,再发布上来”, 呵呵,感想他的热心,也希望以后大家有什么好的改进也可以发布出来让大家都可以一起学习下。

闲话少说,在最后关头和大家说说完结篇代码里的改进 ,上图看效果:






有图可以看到,首先是修复了之前翻起页阴影顶点,定位异常的问题,然后是添加了翻起页背面的显示,以及光影效果,并且修复了,放翻页趋向于垂直方向时,光影效果出现的漂移现象。

文章后边已经上传翻页效果的源码了,我这里不详细讲太多,稍后有时间的话,我会把光影效果这部分代码的原理,另外写一篇博客。下面只是给个概述,方便大家研究代码。

首先分析阴影顶点的定位问题,先来看一种特殊情况:





假设直线aT处于垂直位置,两边阴影宽度都为一致,假设为25px, 容易得aT为25*√2=25*1.414,那么处于这种特殊情况下的顶点为:

a.x=T.x;

a.y=T.y-25*1.414



现在我们来看一般性情况:





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);





通过以上计算就可以求出阴影顶点坐标了。



翻起页背面分为两部分求解,第一部分是将原图翻转得到:





以上效果是通过创建一个Matrix mMatrix和float[] mMatrixArray 实现





mMatrix.setValues(mMatrixArray);

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

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





翻转之后为了实现翻起后的光影效果,需要使用 ColorMatrixFilter ,实现以下效果,对这两个不熟的自己找资料研究去~~~╭(╯^╰)╮






呵呵,大概就是这些个内容了,具体的自己研究代码去~~下边给出一个程序中各个点的标示,方便研究:



   

源码地址:http://download.youkuaiyun.com/source/3216809





希望大家也把自己改动的地方发布出来一起研究。



PS:我新写了一篇博客,在博客中对原来地翻页进行了升级,添加了翻页动画效果,并且新添加了一个类,用于读取SD卡中对txt

文本,实现了一个简易的电子书阅读器。请有兴趣对童鞋,移步至:http://blog.youkuaiyun.com/hmg25/archive/2011/05/14/6419694.aspx


转载:http://blog.youkuaiyun.com/hmg25

翻页效果,导入源码即可运行。 package sf.hmg.turntest; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.ColorMatrix; import android.graphics.ColorMatrixColorFilter; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.Path; import android.graphics.PointF; import android.graphics.Region; import android.graphics.drawable.GradientDrawable; import android.util.Log; import android.view.MotionEvent; import android.view.View; public class PageWidget extends View { private static final String TAG = "hmg"; private int mWidth = 480; private int mHeight = 800; private int mCornerX = 0; // 拖拽点对应的页脚 private int mCornerY = 0; private Path mPath0; private Path mPath1; Bitmap mCurPageBitmap = null; // 当前页 Bitmap mCurPageBackBitmap = null; Bitmap mNextPageBitmap = null; PointF mTouch = new PointF(); // 拖拽点 PointF mBezierStart1 = new PointF(); // 贝塞尔曲线起始点 PointF mBezierControl1 = new PointF(); // 贝塞尔曲线控制点 PointF mBeziervertex1 = new PointF(); // 贝塞尔曲线顶点 PointF mBezierEnd1 = new PointF(); // 贝塞尔曲线结束点 PointF mBezierStart2 = new PointF(); // 另一条贝塞尔曲线 PointF mBezierControl2 = new PointF(); PointF mBeziervertex2 = new PointF(); PointF mBezierEnd2 = new PointF(); float mMiddleX; float mMiddleY; float mDegrees; float mTouchToCornerDis; ColorMatrixColorFilter mColorMatrixFilter; Matrix mMatrix; float[] mMatrixArray = { 0, 0, 0, 0, 0, 0, 0, 0, 1.0f }; boolean mIsRTandLB; // 是否属于右上左下 // for test float mMaxLength = (float) Math.hypot(480, 800); int[] mBackShadowColors; int[] mFrontShadowColors; GradientDrawable mBackShadowDrawableLR; GradientDrawable mBackShadowDrawableRL; GradientDrawable mFolderShadowDrawableLR; GradientDrawable mFolderShadowDrawableRL; GradientDrawable mFrontShadowDrawableHBT; GradientDrawable mFrontShadowDrawableHTB; GradientDrawable mFrontShadowDrawableVLR; GradientDraw
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值