翻页(folding)特效的实现
作者: 刘鹏
日期: 2010-06-08
本文详细介绍了如何实现翻页(folding)特效。
简介
翻页(folding)特效在 UI 中用的多,如转场、电子书的翻页等。翻页(folding) 效果如下图所示:
![]() |
图1. from 参考资料1 |
实现 folding 特效有很多方法,包括 2D 的和 3D 的,下面将分别介绍。
2D 方法
总的思路是: 截屏 + 直角三角形 + 三边形(bezier1/bezier2/line) + timer 更新。如下图所示。
![]() |
图2. folding特效分解 |
folding 特效可分解成三部分:
- 未翻完的部分,如图2的区域1;
- 翻过去,露出的底图部分,如图2的区域2;
- 褶皱部分,如图2的区域3。
仔细分析,可以得到如下的思路:
- 区域1是个五变形,用上层的图填充;
- 区域2是个直角三角形,用下层的图填充;
- 区域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...