翻页效果

小时候看电子书,很多电子书APP都有仿真的翻页效果,那时候觉得很新奇,奈何姿势水平不够,看不破其中的奥秘,有些当时想不明白的事情,等一段时间,自然而然就明白了。就像小时候家长叮嘱要让着女同学,那时候不懂为何这般,现在我已经没有女同学了。

前几天,我突然意识到是时候去揭开当年那个奥秘了,于是先在网上找了些相关实现,大致有几种思路:

  • 用骨骼动画做一个翻页动画,在程序中替换骨骼动画的皮肤。
  • 通过移动上层的图逐渐遮挡住下层的图,再加上一张Mask达到翻页效果。
  • 把网格贴着圆柱位移。

这些思路可以达到效果,但各自都有很明显的缺陷,直到我无意中在某大神知乎专栏瞄到一行关键线索《Deforming Pages of 3D Electronic Books (sketches 0135)》,几经折腾,终于找到了原文:

Deforming Pages of 3D Electronic Books (sketches 0135)

其实原理很简单,跟上面列出的第三条思路相似,但相对复杂一点。翻页,可以想象成一个圆锥体从纸的最右端平移到最左端,平移的过程中,纸会包裹着圆锥,从而形成曲面。这个过程就是计算平面(xy)坐标映射到圆锥(A,a)表面坐标。

最终的效果是这样的

翻页