简介

翻页(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);

    ... ...

3D 方法

To be continued...

Reference

1. Folding