翻页(folding)特效的实现

翻页(folding)特效在 UI 中用的多，如转场、电子书的翻页等。翻页(folding) 效果如下图所示：

图1. from 参考资料1

实现 folding 特效有很多方法，包括 2D 的和 3D 的，下面将分别介绍。

2D 方法

总的思路是： 截屏 + 直角三角形 + 三边形(bezier1/bezier2/line) + timer 更新。如下图所示。

图2. folding特效分解

folding 特效可分解成三部分：

1. 未翻完的部分，如图2的区域1；
2. 翻过去，露出的底图部分，如图2的区域2；
3. 褶皱部分，如图2的区域3。

仔细分析，可以得到如下的思路：

1. 区域1是个五变形，用上层的图填充；
2. 区域2是个直角三角形，用下层的图填充；
3. 区域3是由两条 bezier 曲线加一条直线构成的三边形，区域3和区域1之间运用半透明效果。

已知鼠标当前位置 (x, y)、窗口 width 和 height，很容易算出三个区域各个 顶点的坐标，见图2。根据顶点坐标，通过 path 接口，可以画出三个区域的形 状。 再通过设置剪切域(clip)，就可以在三个区域中绘制想要的图形。

以 QT 为例，伪代码如下所示：

... ...

// set composition mode
painter->setCompositionMode (QPainter::CompositionMode_Source);

QPainterPath path;

/* Draw region 1 */

painter->save ();
path.moveTo (0,0);
path.lineTo (mouse_pos.x, 0);
path.lineTo (WIN_WIDTH, mouse_pos.y);
path.lineTo (WIN_WIDTH， WIN_HEIGHT);
path.lintTo (0, WIN_HEIGHT);
path.closeSubpath ();
painter->setClipPath (path);
painter->drawPixmap (0,0, image_up);
painter->restore();

/*Draw region 2*/
painter->save();
path.clear();
path.moveTo (mouse_pos.x, 0);
path.lineTo (WIN_WIDTH, mouse_pos.y);
path.lineTo (WIN_WIDTH, 0);
path.closeSubpath ();
painter->setClipPath (path);
painter->drawPixmap (0,0,image_down);
painter->restore();


/* Draw region 3 */
path.clear();
path.moveTo (mouse_pos.x, 0);
path.cubicTo (c1x, c1y, c2x, c2y, mouse_pos.x, mouse_pos.y);
path.cubicTo (c1x, c1y, c2x, c2y, WIN_WIDTH, mouse_pos.y);
path.closeSubpath ();
painter->setBrush (color);
painter->drawPath (path);

... ...