17.8  利用GDI+实现翻页效果（1）

相册的翻页效果是相册实现的关键技术，本节将详细介绍相册翻页效果实现的过程。相册翻页过程如图17.21所示。

图17.21  相册的翻页过程

整个翻页动画可以概括为：

（1）完全绘制出第1页和第2页。在绘制完成之后，区域3和区域2部分将会遮挡住第2页的原来可见部分。

（2）计算出对称线及区域3和区域2的裁剪区域。

（3）绘制区域2部分。这是下面的一页的部分区域（第4页）。

（4）根据热点进行相应转换，并且进行相应旋转。

（5）绘制区域3部分。这是第2页在翻页过程中显示的它的背面（第3页）的内容。

要深刻理解这个过程中需要注意以下几点：

1．翻动轴点及区域2及区域3的对称线

翻动轴点代表在翻页时折痕在水平轴线上的位置，它标明对称线的起始位置。在翻页过程中，翻动轴点一直从页边缘到书中间这段距离之间移动。从页边到翻动轴点的这段距离（m_x）将随着页面的翻动而变化。当翻动轴点到达书的中间位置时，动画就停止了，这时m_x=width。

对称线代表翻页时页面的折痕。它是用于计算在翻页时参与的页面可见部分。在程序中，对称线控制两件事情：

分开区域2和区域3部分的裁剪区域。

确定了区域3部分进行转换的坐标原点。

对称线可以用下面两个等式来描述：

a = 45 + ( (45 *m_x) / width )  
h = m_x Tan ( a )  

角度a会随着x的变化而变化。这个等式表明当x=0时a = 45°，并且当x= width时a = 90°。

翻页刚开始时，x=0，因此区域2和区域3部分并不可见。随着x的增加，对称线就形成了直角三角形的斜边。三角形由3个长度确定：对称线、m_x和高度h。如图17.21这种情况。

随着x的增加，将会出现h>= height的情况。当这种情况出现后，对称线与页面相交的区域将会由三角形变成梯形。梯形的高度就是height，如图17.22所示。

图17.22  梯形区域3

2．翻页过程中的3个区域

确定了翻动轴点及对称线的作用后，需要明确3个区域的含义，即区域1、区域2及区域3。

区域1部分：这部分是要翻动的页面在裁减出区域2和区域3部分之后的可见部分（第2页）。

区域2部分：这部分来自于正在翻动的页面之下的另一页面，在这个例子中指的是第4页的可见部分。区域2就是被对称线与页面形成的闭合曲线所裁减的部分。在这个部分之上的页面（第2页）的相应部分将会被直接裁减。显而易见，随着x的增加（a也随着增加），这个可见部分将会越来越大。

区域3部分：这部分区域的图像表示正在翻动的页面背面图像。在这个例子中，区域3部分区域代表了第3页的可见部分。区域3部分也是通过对称线指定的，但是在页面的这一边（对称线的左边）。

在上面两幅图中，当翻动第2页时，区域2部分将会是第4页的右下部分，而区域3部分将会是第3页的左下部分。如图17.23所示为区域2和区域3之间的关系。