本文正在参与「金石方案」
前言
之前我写过一遍文章《从阅览页仿真页看贝塞尔曲线》，简要的和咱们介绍了仿真页的详细实现思路，正好写完文章的时分，看到 OPPO 发布会里面提到了仿真页，像这样：
看着确实有点炫酷，我平时也触摸了许多跟阅览器相关的代码，就零零碎碎花了一些时间撸了一个双页仿真。
看效果：
因为运用录屏，所以看着有点卡顿，实际效果非常流畅！
一、基础常识具备
仿生页里面用到许多自定义 View 的常识，比如：
- 贝塞尔曲线
- 了解 Canvas、Paint 和 Path 等常用的Api
- Matrix
具备这些常识今后，咱们就能够看懂绝大部分的代码了。这一篇同样并不想和咱们过多的介绍代码，详细的能够看一下代码。
二、双仿真和单仿真有什么不同
我写双仿真的时分，感觉和单仿真有两点不同：
- 制作的页数
- 背部的贴图处理
首先，单仿真只要预备两页的数据：
背部的内容也是第一页的内容，需求对第一页内容进行翻转再平移。
而双仿真需求预备六页的内容，拿左面来说：
咱们需求预备上层图片（柯基）、背部图片（阿拉斯加）和底部图片（吉娃娃，看不清），因为咱们不知道用户会翻页哪侧，所以两边总共需求预备六页的数据。
因为翻转机制的不一样，双仿真关于背部的内容只需求平移就行，但是需求新的一页内容，这里相对来说比单仿真简略。
三、我做了哪些优化
主要对翻页的思路进行了优化，
正常的思路是这样的，手指落下的点即页脚：
这样写起来愈加简略，但是关于用户来说，可操作的区域比较小，相对来说有点难用。
别的一种思路便是，手指落下的点即到底部同等间隔的边：
即手指落位的方位到当前页页脚间隔 = 翻动的方位到当前页脚的间隔
运用这种方法的优点便是用户能够操作的区域更大，翻书的感觉跟翻实体书的感觉更类似，也愈加跟手。
总结
这篇文章就讲到这了，这个 Demo 其实是一个半成品，还有一些手势没处理，暗影的展示还有一些问题。
写仿真比较难的当地在于将一些场景转化成代码，有些当地确实很难去想。
talk is cheap, show me code：
库房地址：github.com/mCyp/Double…
如果觉得本文不错，点赞是对本文最好的肯定，如果你还有任何问题，欢迎谈论区讨论！
