如何写一个炫酷的大屏仿真页

前言

之前我写过一遍文章《从阅读页仿真页看贝塞尔曲线》，简要的和大家介绍了仿真页的具体实现思路，正好写完文章的时候，看到 OPPO 发布会里面提到了仿真页，像这样：

看着确实有点炫酷，我平时也接触了很多跟阅读器相关的代码，就零零碎碎花了一些时间撸了一个双页仿真。

看效果：

由于使用录屏，所以看着有点卡顿，实际效果非常流畅！

一、基础知识具备

仿生页里面用到很多自定义 View 的知识，比如：

1. 
   
2. 贝塞尔曲线
   
3. 熟悉 Canvas、Paint 和 Path 等常用的Api
   
4. Matrix
   

具备这些知识以后，我们就可以看懂绝大部分的代码了。这一篇同样并不想和大家过多的介绍代码，具体的可以看一下代码。

二、双仿真和单仿真有什么不同

我写双仿真的时候，感觉和单仿真有两点不同：

• 
  
• 绘制的页数
  
• 背部的贴图处理
  

首先，单仿真只要准备两页的数据：

背部的内容也是第一页的内容，需要对第一页内容进行翻转再平移。

而双仿真需要准备六页的内容，拿左边来说：

我们需要准备上层图片（柯基）、背部图片（阿拉斯加）和底部图片（吉娃娃，看不清），因为我们不知道用户会翻页哪侧，所以两侧一共需要准备六页的数据。

由于翻转机制的不一样，双仿真对于背部的内容只需要平移就行，但是需要新的一页内容，这里相对来说比单仿真简单。

三、我做了哪些优化

主要对翻页的思路进行了优化，

正常的思路是这样的，手指落下的点即页脚：

这样写起来更加简单，但是对于用户来说，可操作的区域比较小，相对来说有点难用。

另外一种思路就是，手指落下的点即到底部同等距离的边：

即手指落位的位置到当前页页脚距离 = 翻动的位置到当前页脚的距离

使用这种方式的好处就是用户可以操作的区域更大，翻书的感觉跟翻实体书的感觉更类似，也更加跟手。

总结

这篇文章就讲到这了，这个 Demo 其实是一个半成品，还有一些手势没处理，阴影的展示还有一些问题。

写仿真比较难的地方在于将一些场景转化成代码，有些地方确实很难去想。

talk is cheap, show me code：

仓库地址：github.com/mCyp/Double…

如果觉得本文不错，点赞是对本文最好的肯定，如果你还有任何问题，欢迎评论区讨论！