简介：这份资源面向Android开发者，尤其是希望在电子书或多媒体应用中实现逼真翻页交互的中高级开发者，聚焦「双开」形态的翻书效果，即同时呈现相邻两页并模拟真实书页卷曲过渡。包内共63个文件，以22个class与7个java源码为核心，配合5个xml布局与配置、12个png及6个jpg图片素材，另有apk安装包、dex与md说明文档等，压缩包约3.97MB，结构完整可直接导入研究。内容围绕视图布局、属性动画组合、OpenGL ES三维渲染、手势检测与性能优化等关键环节展开，CurlActivity作为核心类承载翻页动画与触摸交互逻辑，便于读者对照源码理解页面旋转、纹理映射与滑动响应的实现思路。目前已有483人学习下载，适合需要快速掌握翻书动画原理、复用成熟实现或排查渲染性能问题的开发者参考借鉴。

1. 翻书效果双开：一个被低估的阅读类交互细节

做阅读类 App 的同行大概都遇到过这种需求：产品经理拿着某款阅读软件的截图过来，说“这个翻页效果我们也做一个”。你打开一看，页面从中间对折、书页背面透出下一章的影子、手指拖到一半松手还会自动回弹——这就是翻书效果，业内常说的“双开”指的是左右两页同时呈现、以中缝为轴对折翻动的形态，区别于单页平移或覆盖式翻页。它看起来只是动画，实际牵扯到视图层级、触摸事件分发、贝塞尔曲线拟合、阴影渐变和状态机回弹五件事，任何一环没对齐，翻起来就是“纸片乱飞”而不是“书页翻动”。这份资源包围绕双开翻书效果给出了一套可运行的实现，适合正在做阅读器、画册、电子杂志的 Android 开发者直接拆开用，也适合想搞懂自定义 View 触摸驱动动画的人拿来当练手素材。

2. 双开翻书的几何模型：先想清楚纸怎么弯

动手写代码之前，得先把“翻”这件事在二维平面上描述清楚。很多人一上来就找动画库，结果参数调了半天还是不像，根子在于没建立几何模型。双开翻书的核心不是旋转，而是沿中缝的镜像折叠：当前页和中缝另一侧的页面构成一个“对折”关系，手指拖动的位置决定折痕线，折痕线两侧分别做镜像变换，再叠加阴影模拟纸张厚度。

2.1 折痕线、镜像点与触摸坐标的映射

把屏幕看成一张摊开的纸，中缝在 x = width/2 处。手指按下的点 P(x, y) 与中缝构成一条折痕的候选方向，实际实现里通常取“触摸点与当前页某个角点的连线”作为折痕。以右下角翻页为例，折痕是触摸点与页面右下角连线的中垂线，这条线把页面切成“翻起部分”和“留下部分”。翻起部分绕折痕做镜像，镜像后的多边形就是书页背面的可见区域。

这里有个容易翻车的地方：镜像变换用Matrix做setScale(-1, 1)再平移，浮点误差累积会让背面边缘和正面边缘对不齐，出现一条 1px 的缝。血泪经验是镜像后统一用Path重新闭合，别指望两次独立变换严丝合缝。

// 以触摸点 touch 和角点 corner 求折痕中垂线，返回折痕上的两个端点 private void computeFoldLine(PointF touch, PointF corner, PointF outA, PointF outB) { // 中点 float midX = (touch.x + corner.x) / 2f; float midY = (touch.y + corner.y) / 2f; // 连线方向 float dx = corner.x - touch.x; float dy = corner.y - touch.y; // 中垂线方向 = 连线方向旋转 90 度 float nx = -dy; float ny = dx; float len = (float) Math.hypot(nx, ny); if (len == 0) { len = 1; } nx /= len; ny /= len; // 沿中垂线向两侧延伸足够长度，保证覆盖整页 float extend = 2000f; outA.set(midX + nx * extend, midY + ny * extend); outB.set(midX - nx * extend, midY - ny * extend); }

这段代码只做一件事：给定触摸点和被翻的角点，算出折痕所在直线的两个远端点。extend取 2000 是个经验值，只要大于屏幕对角线就能保证折痕贯穿整页，取小了会出现折痕没画到头、背面缺一块的现象。Math.hypot比手写开方稳，避免nx/ny归一化时除零。实际项目里我会把折痕计算封装成独立方法，因为单页翻和双开翻只是角点来源不同，几何逻辑可以复用。

2.2 双开模式下左右页的坐标系拆分

双开和单页最大的差别在于：单页只有一个绘制区域，双开要把画布拆成左右两个“半页”，各自有独立的裁剪区和内容偏移。常见做法是在onDraw里根据当前翻页进度progress（0 到 1）决定左右页各自画什么：左页画上一章的末页，右页画当前章的首页，翻动过程中左页逐渐被“翻走”，右页逐渐露出。

坐标系拆分的关键是内容坐标与屏幕坐标的换算。阅读器的每一页内容通常按固定宽度排版，双开时每半页的可用宽度是screenWidth/2减去中缝留白。如果直接拿屏幕坐标去截取 Bitmap，翻到一半会发现文字被中缝切掉半个字。我一般会预留 8 到 16dp 的中缝 gutter，排版时按(screenWidth - gutter) / 2计算单页宽度，绘制时左页偏移 0、右页偏移screenWidth/2 + gutter/2。

这张表里的四个参数基本决定了翻书“像不像”。新手最容易忽略shadowWidth，觉得阴影可有可无，实际上纸张翻动的立体感八成来自折痕处那条渐变阴影，没有它，镜像出来的背面就是一块死板的色块。

3. 触摸驱动与状态机：让手指和动画不打架

几何模型解决“画成什么样”，状态机解决“什么时候画成什么样”。翻书交互的本质是一个受触摸驱动的状态迁移：静止 → 拖拽 → 松手判定 → 回弹或翻页完成 → 静止。这套状态机写不好，就会出现手指还在拖、动画自己往前跑，或者松手后页面卡在半空不动的情况。

3.1 用 GestureDetector 还是自己算：取舍与事件分发

很多教程直接上GestureDetector的onScroll，我试过，翻书场景下不推荐。原因是onScroll给的是增量位移，而翻书需要的是绝对触摸位置来实时计算折痕，增量累加会引入漂移，拖久了折痕和手指对不上。更稳的做法是重写onTouchEvent，在ACTION_DOWN记录起点、ACTION_MOVE直接读event.getX()/getY()算折痕、ACTION_UP根据当前进度决定去向。

事件分发上有个坑：如果翻书 View 外面套了ViewPager或RecyclerView，横向滑动会被父容器抢走。解决办法是在onTouchEvent里对ACTION_DOWN返回 true 并调用getParent().requestDisallowInterceptTouchEvent(true)，等判定为纵向滑动或翻页结束后再放开。别在onInterceptTouchEvent里做翻页判定，父容器拦截的时机和你需要的时机经常错位。

@Override public boolean onTouchEvent(MotionEvent event) { switch (event.getActionMasked()) { case MotionEvent.ACTION_DOWN: // 抢在父容器之前拿到事件，避免被 ViewPager 截胡 getParent().requestDisallowInterceptTouchEvent(true); downX = event.getX(); downY = event.getY(); state = STATE_DRAGGING; return true; case MotionEvent.ACTION_MOVE: if (state == STATE_DRAGGING) { // 直接用绝对坐标算折痕，不做增量累加 updateFold(event.getX(), event.getY()); invalidate(); } return true; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: // 进度过半判定为翻页完成，否则回弹 if (currentProgress > 0.5f) { startFlipForward(); } else { startRebound(); } return true; } return super.onTouchEvent(event); }

ACTION_DOWN里那句requestDisallowInterceptTouchEvent(true)是保命代码，少了它，外层只要是个可滚动容器，你的翻书 View 大概率收不到完整的 MOVE 序列。currentProgress是 0 到 1 的翻页进度，由折痕位置归一化得到，0.5 这个阈值不是死的，阅读类产品里通常设成 0.3 到 0.4，让用户轻轻一划就能翻过去，符合“翻书比拖进度条更随意”的心理预期。

3.2 回弹动画：ValueAnimator 的插值器与进度归一化

松手后的回弹或翻页完成，用ValueAnimator驱动进度从当前值过渡到 0 或 1。这里有两个参数值得细说：插值器和时长。翻页完成用DecelerateInterpolator，模拟纸张惯性甩出去后减速；回弹用OvershootInterpolator(1.2f)或者干脆AccelerateDecelerateInterpolator，前者带一点回弹过冲，更像真实纸张，后者稳但略呆板。时长别超过 300ms，超过用户会觉得“卡”。

private void animateProgress(float from, float to, boolean isForward) { ValueAnimator animator = ValueAnimator.ofFloat(from, to); animator.setDuration(isForward ? 260 : 200); animator.setInterpolator(isForward ? new DecelerateInterpolator() : new AccelerateDecelerateInterpolator()); animator.addUpdateListener(a -> { currentProgress = (float) a.getAnimatedValue(); invalidate(); }); animator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { if (isForward && Math.abs(to - 1f) < 0.001f) { // 翻页完成，通知内容层切到下一页 onPageFlipped(); } state = STATE_IDLE; } }); animator.start(); }

onPageFlipped()是内容层和动画层的交界点，翻页动画走完才真正切换章节数据，动画过程中内容层保持不动，避免“边翻边换字”的撕裂感。isForward区分翻页和回弹，两者时长和插值器不同，混用会让回弹显得拖沓。进度归一化统一用 0 到 1，所有绘制逻辑都基于这个值算折痕位置，好处是动画和拖拽共用同一套绘制代码，不会出现“拖的时候一个样、松手后另一个样”的玄学问题。

4. 避坑排查：翻书效果最容易翻车的五个地方

4.1 背面内容错位或镜像反了

现象：翻起的书页背面文字是反的，或者背面内容和正面接不上。原因通常是镜像矩阵作用在了错误的坐标系上——先平移再镜像和先镜像再平移结果完全不同。解决：镜像前把画布平移到折痕原点，镜像后再平移回去，用canvas.save()/restore()包住，别在全局画布上直接setScale(-1,1)。

4.2 快速连续翻页导致状态错乱

现象：用户快速连划两下，页面翻到一半又往回弹，或者直接跳到第三页。原因是上一次动画没结束就启动了新动画，两个ValueAnimator同时改currentProgress。解决：启动新动画前先animator.cancel()，并在onAnimationEnd里判断isForward和当前进度是否匹配，不匹配就丢弃这次回调。

4.3 低端机上掉帧严重

现象：中低端设备翻页时明显卡顿，阴影渐变尤其吃性能。原因是每帧都在onDraw里新建Paint、Path、LinearGradient。解决：把这些对象提到成员变量里复用，Path用reset()而不是new，渐变只在折痕位置变化超过阈值时才重建。实测这样能把单帧绘制时间压掉三到四成。

4.4 中缝处出现一条白线或黑线

现象：左右两页交界处有一条 1px 的缝。原因是左右页绘制区域按浮点计算，canvas.clipRect取整后留下亚像素间隙。解决：右页裁剪区左边界减 1px 与左页重叠，或者干脆用gutter区域画一条与纸张同色的底，把缝盖住。这是像素对齐的老问题，别指望靠调参数根治。

4.5 触摸点落在中缝附近时折痕抖动

现象：手指在中缝附近拖动，折痕来回跳。原因是触摸点与角点距离趋近于零时，中垂线方向对微小位移极度敏感。解决：给触摸点设一个最小偏移量，距离角点小于 20dp 时钳制到 20dp，或者在中缝附近直接禁用翻页、改为点击翻页。这个坑不修，用户会觉得“这翻页有毛病”。

5. 从能跑到好用：把翻书效果接进真实阅读器的三个技巧

资源包里的实现跑起来只是起点，接进真实阅读器还有几件事要做。第一件是预渲染相邻页：翻页动画开始前，把下一页的内容提前画到Bitmap缓存里，动画过程中直接贴图，避免每帧重新排版文字。我一般用LruCache存三页（当前、前、后），内存吃紧时按Bitmap字节数算缓存上限，别按页数算，不同分辨率下页数一样内存差好几倍。

第二件是翻页方向与章节切换解耦。双开模式下，右页翻完意味着进入下一章，但用户可能只是想翻到本章最后一页。做法是把“翻页”和“换章”分成两个事件：onPageFlipped只负责页内推进，推进到边界才触发onChapterChanged。这样动画层永远只关心几何，内容层自己管章节逻辑，两边互不污染。

第三件是用录制回放验证手感。翻书效果好不好，光看代码看不出来，我会用adb shell screenrecord录一段慢动作，逐帧看折痕移动是否跟手、阴影过渡是否连续。下面这个命令录 10 秒、限制码率，方便反复对比调参前后的差异：

# 录制 10 秒屏幕，输出到本地，用于逐帧检查翻页动画 adb shell screenrecord --time-limit 10 --bit-rate 4000000 /sdcard/flip.mp4 adb pull /sdcard/flip.mp4 ./flip.mp4

--time-limit别设太长，10 秒足够覆盖两三次完整翻页；--bit-rate给到 4Mbps 能看清阴影渐变，再低就糊了。录完用播放器的逐帧功能看，重点看松手那一帧折痕有没有跳变、回弹结束那一帧有没有突然停住。

这套验证流程走下来，基本能把“看着像”和“用着顺”之间的差距补上。从那以后我每次做翻书类交互，都强制先录一段慢动作过一遍这张表，再谈参数微调——毕竟翻书效果的玄学，多半是没量化的手感问题。希望帮到你。

本文还有配套的精品资源，点击获取