開始做翻頁效果時發現這方面資料不多，能涉及原理的文章更少，參考這篇文章大致瞭解了翻頁原理，但是後面發現不用那麼複雜。

下面介紹簡要原理：

圖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’座標可區分區域。

效果如下：