开始做翻页效果时发现这方面资料不多，能涉及原理的文章更少，参考这篇文章大致了解了翻页原理，但是后面发现不用那么复杂。

下面介绍简要原理：

   

图1 此图参考上面那篇文章                               图2 手绘图 左右两个θ是不一样的。右图的θ就是圆柱放置的角度。

这里需要一点空间想象力。

贴着圆柱滚动的翻页原理（从右下角翻起）：

1、图1中已知a点（鼠标点击的点）和f点，真正要计算的点是af中点g点，以及id曲线上的任意一点坐标，比如可以求ga与id的交点g0，此外需求eh直线倾斜角度的正弦sinβ和余弦值cosβ（图1）。这个可以通过a点和f点即可求得。θ和β值一样。

2、想象页面贴着一个圆柱滚动，但是页面不整个围绕圆柱转动，看手绘图。m那条直线相当于直线bk，n那条直线相当于直线di，所以图1中n点和g0点的距离就是圆柱的半径。

3、翻起来反生卷曲的区域其实就是bk和di直线之间的区域。这部分区域又分两部分：一部分是翻起来可以看到背面纹理的区域，第二部分就是翻起来还看不到背面纹理的区域。

4、abk三角区域其实是平整的，可以通过eh对称关系直接求出背面纹理坐标。

注意手绘图中的a点是在bk的投影线上的点，圆柱中的每一个切面就和手绘图一样，所以是随圆柱滚动的支点都是在投影线上。通过手绘图左图，我们可以求出af’大小（在半圆c点上半部的点，即翻起来可以看到背面纹理的区域，90度加f点对应角度θ，在半圆c点下半部的点，即翻起来看不到背面纹理的区域，是90度减去点对应的角度），但这不是f点对应到下一页f’点的距离。看手绘图右图，f点到f’点的投影距离是af’减去d后的值ff’，通过圆柱倾斜的角度和f点坐标，就可以求出对应的f’的坐标。通过判断f’坐标可区分区域。

效果如下：