本篇是Android Jetpack Compose仿真翻页组件PTQBookPageView的规划思路篇，因为篇幅的关系，以及因为毕竟是UI组件，光靠文字肯定无法彻底解说清楚，因而之后会录制一个更具体的视频来把组件的规划、完结和源码彻底讲清楚。本篇文章仅会介绍规划和完结的思路，具体的代码不会过多触及。

• 组件介绍页：传送门
• 组件库房页：传送门
• 作用演示：下载APK
• 源码解析：
  • 算法部分
  • 制作和动画部分（包含文字歪曲、点击动画、暗影等作用）

那么接下来咱们话不多说，直接开端。

1 需求分析

首要咱们得明白有哪些要完结的功用，或者说想把这个组件做成什么姿态，接下来罗列一下需求完结的点和需求处理的问题。

1. 翻页算法
   • 怎么将册页抽象成点模型，以便能够在屏幕上进行制作
   • 怎么核算手势与UI的关系，即输入为手势，输出为册页点
     • Loose状况下的算法
       • 处理翻转
     • thetaMin状况下的算法
     • wMin状况下的算法
     • tight状况下的算法
       • 册页跟随手指算法
     • 各个状况之间怎么平滑过渡连接
2. 制作
   • 怎么制作暗影
   • 怎么制作光泽
   • 怎么完结文字歪曲
   • 怎么将核算出的点模型制作成册页
3. 动画
   • 怎么完结起手/离手动画
   • 怎么完结点击翻页
4. Compose完结
   • 怎么将屏幕内容制作为Bitmap
   • 结构规划
     • 状况办理
     • 回调规划

纲要就列到这儿，基本上便是这些功用点，接下来咱们具体展开。

需求提一嘴的是，算法、制作、动画的思路与平台无关，能够运用其他的完结方法，例如原生Android、Flutter都能够完结，最终一部分则是有关Compose的部分。

2 算法

算法部分首要处理“怎么把页面抽象成点模型”以及“怎么依据手势核算出点模型的点坐标”两个问题。

2.1 点模型

整个册页被抽象成由15个点构成的点类AllPoints，如下图所示。

为了数学核算的便利，在核算前会将所有点处理成笛卡尔直角坐标系，而非安卓View系统的坐标系（代码中称为肯定系），在核算完所有点后，再转换回来。这一点其实是能够优化的一个点，假如悉数运用肯定系直接核算，能够削减部分转换的开支。

2.2 依据手势核算点坐标

具体过程无法用文字说明，因而省略1万字。

这一步完结之后，理应能够做到：输入一个仅有的手指坐标，输出一个与之对应的仅有AllPoints类。

3 制作

这一步首要处理“怎么制作暗影”、“怎么制作光泽”、“怎么完结文字歪曲”、“怎么将核算出的点模型制作成册页”四个问题。

3.1 暗影

册页边上有暗影，而这个暗影也是依据核算出的AllPoints制作的。

3.2 光泽

与暗影类似，当时页背页的光泽也依据AllPoints进行制作。

3.3 文字歪曲

当时页正面在翻起来的时分，翻起来的部分应该需求向上卷曲，这个能够使用圆筒算法和图画的歪曲算法（drawBitmapMesh方法）来完结。

3.4 制作册页

在上述都完结后，咱们能够把册页看成是由若干图层组合而成的，具体地：

• 画下一页
• 画当时页背页在下一页留下的暗影
• 画当时页
• 画当时页翻起部分在当时页留下的暗影
• 画当时页背面（翻起部分）
• 画当时页背面（翻起部分）光泽
• 加强一下轮廓

悉数画完今后，就能够得到册页了。

4 动画

动画包含两部分，“怎么完结起手/离手动画”、“怎么完结点击翻页”。

4.1 起手/离手动画

实际上，起手或离手动画便是让程序自动像手指点击那样产生一个手指坐标的输入，同样地，得到仅有的AllPoints输出，然后，每隔很小一段时间自动地控制手指坐标改变，就得到了想要的动画作用。

4.2 点击翻页

这部分根据起手/离手动画，当手指点击今后，直接设置好一个起手和离手动画即可。

5 Compose完结

首要分为“制作Bitmap”和“结构规划”两部分。

5.1 制作Bitmap

因为想做成一个能传入任何View的组件，因而，Compose侧需求处理的一个重头问题便是，怎么获取到运用者自定义传入的View进行翻页。

这儿选用的做法是，先将当时组件制作为Bitmap，然后再结合AllPoints进行核算。我规划了BitmapController类专门负责生成和办理Bitmap对象。

但是其实获取当时View的Bitmap这一步在目前的Compose中遇到了许多困难，最终的完结是学习了fundroid大佬的这个思路。

这样的Bitmap的方法应该不是性能上的最优解，假如能直接操作屏幕像素，应该性能上还能够提高，但是不知道有没有这样的方法，我不是太会hhh。

5.2 结构规划

结构规划部分首要考虑了两方面，一是状况传参，二是回调，我仿照了LazyColumn的方法进行传参和回调的处理，在组件调用上个人认为代码还算高雅和简洁。

6 最终

整个翻页组件的规划思路就差不多是这样了，这其中的内容太多了，而且许多东西无法用文字说明，因而之后会预备录制一个视频愈加具体地讲清规划思路和代码细节，直接看源码。

就写到这儿吧~