/LGC图形渲染/翻页(folding)特效的实现

翻页(folding)特效的实现

作者: 刘鹏

日期: 2010-06-08

本文详细介绍了如何实现翻页(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);



    ... ...

3D 方法

To be continued...

Reference

1. Folding