LayoutManager实现翻页动画

最新推荐文章于 2024-08-12 09:03:19 发布

Android技术之家

最新推荐文章于 2024-08-12 09:03:19 发布

阅读量890

点赞数

文章标签： canvas android svg css3 ios

关于阅读器翻页动画的实现，有大把的开源项目可以借鉴，但基本都是基于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) {
                    //计算下一个view
                    View 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。

核心代码：

 @Override
        public int getPageCount() {
            return adapter.getItemCount();
        }


        @Override
        public 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

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