关于阅读器翻页动画的实现，有大把的开源项目可以借鉴，但基本都是基于canvas 2D动画，利用缓存bitmap来处理。绘制需要完全手动绘制。有很多优秀的ios 阅读产品，都可以在阅读页插入翻页视频，以及几大ADDSP的广告sdk顺滑接入，炫酷之余很有产品价值。反观android，目前还没找到同样优秀的产品，苦于没有借鉴思路。随不知活路，却已知死路。bitmap+canvas的手动绘制 局限性太大，展现形态未能解耦，内容无法对外扩充。这对于接入pdf，epub等格式的拓展非常困难。

反过来想想，使用缓存bitmap+canvas最主要的就是目的就是解决缓存翻页与动画的实现，而并非是要处理页面展现的。基于单个页面解耦的目的，缓存机制可以使用 RecyclerView，动画部分就借助 LayoutManager。

恶补了一波RecyclerView与LayoutManager机制与原理，这里不赘述了。

核心思路：利用LayoutManager将itemView 摆放成Z轴的ABC三层，而不是左，中，右水平摆放，再根据滑动手势处理view状态产生动画。

提前需要考虑的问题：事件穿透，滑动冲突，无缝切换动画，引入openGL实现curl仿真翻页动画的坑。

在下手之前，感觉比较费劲，但是一步步探索实现后，回头再看并不复杂，只是要注意的细节比较多。

目前效果

• 垂直翻页

• 覆盖滑动

• 横向滚动

• 仿真卷曲动画 :取消翻页时，页面会错乱

垂直翻页 和 覆盖滑动 动画实现思路：自定义LayoutManger，处理滑动及itemView显示位置，根据滑动方向将下一个或上一个itemView提前固定作为准备展示的页，利用scale 控制将进入屏幕的itemView显示状态，利用Rotation 实现翻转效果，利用viewZ轴层级准确提供页面层级，利用阴影增加上下页的立体视觉。

核心代码：

if (bookFilpMode == MODE_HORIZATIONAL_SLIDE || bookFilpMode == MODE_FILP) {//view 复用时 需要重制属性if (itemIndex + 1 <= fastVisiPos) {//计算下一个viewView nextView = recycler.getViewForPosition(itemIndex + 1);nextView.setScaleX(1f);nextView.setScaleY(1f);nextView.setTranslationX(0);nextView.setRotationY(0f);if (itemIndex <= focusPosition) {addView(nextView);} else {addView(nextView, 0);}if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {nextView.setElevation(-1);}measureChildWithMargins(nextView, 0, 0);int nl, nr;nl = 0;nr = nl + getDecoratedMeasurementHorizontal(nextView);layoutDecoratedWithMargins(nextView, nl, 0, nr, bottom);}}if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {itemView.setElevation(0);}layoutDecoratedWithMargins(itemView, left, top, right, bottom);if (bookFilpMode == MODE_HORIZATIONAL_SLIDE) {itemView.setTranslationX(dx);final int childCenterX = (right + left) / 2;final int parentCenterX = getWidth() / 2;boolean isChildLayoutLeft = childCenterX <= parentCenterX;if (isChildLayoutLeft) {itemView.setScaleX(1f);itemView.setScaleY(1f);} else {itemView.setTranslationX(0);itemView.setScaleX(0);itemView.setScaleY(0);}} else if (bookFilpMode == MODE_FILP) {final int childCenterX = (right + left) / 2;final int parentCenterX = getWidth() / 2;boolean isChildLayoutLeft = childCenterX <= parentCenterX;if (!isChildLayoutLeft) {//隐藏屏幕外的itemView.setTranslationX(0);itemView.setScaleX(0);itemView.setScaleY(0);}else {itemView.setScaleX(1F);itemView.setScaleY(1F);}float offset = (horizontalOffset * 1.0f) % (childWidth * 1.0f);float rataitonY = Math.abs(offset / childWidth * 90);itemView.setTranslationX(offset);//一边沿着Y轴旋转一边调整位置itemView.setCameraDistance(-50000);//无限拉近相机焦点itemView.setPivotX(0);itemView.setRotationY(-rataitonY);//沿着Y 反转}else {itemView.setTranslationX(dx);itemView.setScaleX(1f);itemView.setScaleY(1f);itemView.setRotationY(0f);}

仿真卷曲动画实现思路：使用开源库pagecurl的卷曲动画，在Layoutmanger中提前准备好Itemview的缓存bitmap,或者直接使用RecyclerView的缓存bitmap，并提供给curlView。

核心代码：

 @Overridepublic int getPageCount() {return adapter.getItemCount();}@Overridepublic void updatePage(CurlPage page, int width, int height, int index) {int lastIndex = curlLayoutManger.getSelectIndex();RBLog.log("updatePage index=%s lastIndex=%s", index, lastIndex);Message message = handler.obtainMessage();message.arg1 = index;handler.sendMessage(message);recyclerView.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);recyclerView.setDrawingCacheEnabled(true);recyclerView.buildDrawingCache();Bitmap bitmap = recyclerView.getDrawingCache().copy(Bitmap.Config.RGB_565, false);recyclerView.setDrawingCacheEnabled(false);recyclerView.destroyDrawingCache();
//                Bitmap front = curlLayoutManger.getItemBitmap().copy(Bitmap.Config.RGB_565,false);page.setTexture(bitmap, CurlPage.SIDE_BOTH);page.setColor(Color.rgb(0xFF, 0xFF, 0xFF), CurlPage.SIDE_BACK);}}

pagecur的引入，十分尴尬。这是我个人能找到最好接入的curl opengl绘制代码。但有一个非常核心的问题，GLSuacefaceView 它不是来自ViewGroup而是View。1.不能与RecyclerView共享同一个事件传递树，2.只能播放View的bitmap 而不是view本身，导致需要提前准备好bitmap。也就是会出现上面动画中，翻页显示错乱的情况，实践了一些思路 都不理想。

如果读到此篇的你有兴趣的话，可以评论交流提供意见或者直击源码https://github.com/HarkBen/ReadAnim

作者：可米西
链接：https://www.jianshu.com/p/1992d49e5fbf

关注我获取更多知识或者投稿