用c#和GDI+实现杂志翻页动画效果

 

说明：以前本人参与个一个电子杂志项目，当时要求实现模拟现实生活中的杂志翻页动画效果，别人推荐了这篇文章，最后达到了我想要的效果，今天尝试把这篇文章翻译了一下。希望对英语水平不太好的同行有帮助。如果你的英语水平足够好，我推荐你阅读英文原文，网址是：http://www.codeproject.com/KB/GDI-plus/TurnThePage.aspx，同时希望大家原谅本人的翻译水平。
 

介绍

 

图 1 翻页效果

这篇文章用来介绍如何在电子书或者电子相册中并列显示图片时创建一种翻页效果，这种翻页效果模仿了现实中的书本翻页情况。

 

背景

写作这篇文章的灵感来自于一个可重用的用于显示图片的组件的需求。我使用了C#和GDI+来提高我对.net下图形图象编程的理解。

 

创建这种效果的技术背景来自于一篇文章《FalshMX中的翻页效果》，网址是： http://www.oreillynet.com/pub/a/javascript/2004/09/03/flashhacks.html ，作者是 Sham Bhangal 。 Sham 在文章里如何在动画效果中使用对称线来控制页面的可见部分。尽管在 Flash MX 中和在 GDI+ 中的处理有些不同，但是利用对称线来计算页面的可见部分这个概念是相同的。

 

在这篇文章中，我们假定第3页和第4页是当前页，并且下一个动作是要翻到第5页和第6页。换句话说，我们要展现的是第4页的翻页效果。

 

动画技巧

下图阐述了在整个动画中的关键区域和变化区域。

 

图2 关键区域和参数

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

1、完全绘制出第3页和第4页。在绘制完成之后，B和C部分将会遮挡住第4页的原来可见部分。

2、计算出对称线和B和C的裁剪区域。

3、绘制B部分。这是下面的一页的部分区域（第6页）。

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

5、绘制C部分。这是第4页在翻页过程中显示的它的背面（第5页）的内容。

 

当前页

《FalshMX中的翻页效果》一文中指出当前页并不参与翻页效果。这就意味着在翻页中的每一面（第3页和第4页）都会首先被不进行任何裁减和转换就绘制出来。B和C这两个可见部分将会在当前页之上进行绘制。