Note: I used to participate in an electronic magazine project. At that time, I was required to simulate the animated effect of the magazine pages in real life. Others recommended this article and finally achieved the desired effect, I tried to translate this article today. I hope it will be helpful for colleagues with poor English proficiency. If your English level is good enough, I recommend you read the original English text:Http://www.codeproject.com/KB/GDI-plus/TurnThePage.aspxAt the same time, I hope you will forgive me for my translation skills.
Introduction
Figure 1 page flip effect this article describes how to create a page flip effect when you show images concurrently in an e-book or an electronic album. This page flip effect imitates the book flip situation in reality.
BackgroundThis article is inspired by the need for a reusable component for displaying images. I used C # And GDI + to improve my understanding of. Net image programming. The technical background for creating this effect is from an article titled "flip effects in falshmx". The URL is:
Http://www.oreillynet.com/pub/a/javascript/2004/09/03/flashhacks.htmlThe author is Sham bhangal. In the article, how does sham use symmetric lines in animation effects to control visible pages. Although the processing in Flash MX is somewhat different from that in GDI +, the concept of using Symmetric lines to calculate visible parts of a page is the same. In this article, we assume that page 3rd and page 4th are the current page, and the next action is to flip to page 5th and page 6th. In other words, we want to display the page turning Effect of 4th pages.
Animation skills
The key areas and changed areas of the animation are described.
Figure 2 the entire page flip animation of key areas and parameters can be summarized as follows: 1. Completely draw 3rd pages and 4th pages. After the painting is complete, part B and part C will block the original visible part of page 4th. 2. Calculate the symmetric line and the cropping area of B and C. 3. Draw Part B. This is part of the following page (page 6th ). 4. Convert and rotate the data according to the hotspot. 5. Draw part C. This is the content on the back (4th pages) of page 5th displayed during page turning.
Current page
In falshmx's page turning effect, the article states that the current page does not participate in the page turning effect. This means that each side of the page (page 3rd and page 4th) is first drawn without any reduction or conversion. The visible parts B and C will be drawn on the current page.
HotspotThe word "Hot Spot" is from
I learned from falshmx's page turning effect. The hotspot word indicates the position of the crease on the horizontal axis when turning pages. It indicates the starting position of the symmetric line. During the page turning process, the hotspot keeps moving from the edge of the page to the middle of the book. The distance from the page edge to the hotspot (x) will change with the page flip. When the hotspot reaches the middle of the book, the animation stops, and X = page_width.
Symmetric lineA symmetric line represents the page crease when pages are turned over. It is used to calculate the visible part of the page involved when turning pages. In a program, the symmetric line controls two things:
1. crop area of part B and part C. 2. coordinate origin of the C part for conversion. The symmetric line can be described using the following two equations:
A= 45 + (45 * X)/page_width) H = x Tan (
A) Attention
AChanges with X. This equation indicates that when x = 0
A= 45 degrees and when x = page_width
A= 90 degrees. When the animation starts, x = 0, so B and C are not visible. With the increase of X, the symmetric line forms the oblique side of the right triangle. The triangle is determined by three lengths: symmetric line, X, and height H. Figure 2 shows this situation. As x increases, h> = page_width may occur. When this happens, the area where the symmetric line and the page Intersect will change from triangle to trapezoid. The height of the trapezoid is page_width. Figure 1. Either a trapezoid or a triangle, this closed Route specifies the cut Areas B and C. To see this effect with a border in the running, set the parameter include_draw_graphics_path to true in the provided source code. The program will draw a golden outline outside the closed path.
PartThis part is the visible part of the page to be turned (page 4th) after part B and part C are cut out ).
Part BPart B is from another page under the page that is being flipped. In this example, it refers to the visible part of page 6th. Part B is the part of the closed curve formed by Symmetric lines and pages. The corresponding part of the page (page 4th) above this part will be directly removed. Obviously, as X increases (A also increases), this visible part will become larger and larger. To view the relationship between A and B, set the include_underside_page_in_animation variable to false. This removes part C from the animation effect.
Part CThe image in part C represents the image on the back of the page being flipped. In this example, Part C represents the visible part of page 5th. Part C is also specified through the symmetric line, but on this side of the page (the left side of the symmetric line ). For example, when you flip 4th pages, Part B will be the lower right part of page 6th, and part C will be the lower left part of page 5th. Figure 3 shows the relationship between B and C.
Figure 3 Relationship between B and C when we plot part C, we use a background image to assist, that is, pageundersideimage. The cut area of the new image is determined by a symmetric line. The 5th page image is drawn in the new buffer, and the new image will be drawn near Part B.
Connect part B and part CWhen the background image of Part C is ready, it is drawn through the following steps: first adjust the system coordinates to the hotspot. Rotate system coordinates 180-2
ADegree. See figure 4 to understand their relationship. Draw an image that contains part C to the corresponding coordinates (-X,-page_height ). Figure 5 shows the rotation.
Figure 4 Adjust angle to match symmetric line
Figure 5 rotating the coordinate system I found it challenging to arrange Parts B and C along the symmetric line because the color of the current page is prone to "Blood edges" (because some red pixels on page 4th ). When I plot Part B or part C, I use a work und: Specify the pixeloffsetmode of the graphic object to be drawn in pixeloffsetmode. Half mode. G. pixeloffsetmode = pixeloffsetmode. Half; I also found that adding a pixel (or dropping a pixel) to rotate the coordinates before creating part of Area C can also prevent "Blood edge ". Pathtranslationmatrix. Translate (float) hotspot. Origin. x + 1, (float) hotspot. Origin. Y); to use the pixeloffsetmode workmode und, set use_pixel_mode_offset in the source code to true.
Draw an animationEach frame of animation is drawn to the currentshownbitmap object in the buffer in the timereffectick method. The currentshownbitmap method only draws the image to the screen.
Main functionsThe following method is used to calculate the B and C images in each frame of an animation:
Private graphicspath getpageundergraphicspath (int x, refdouble A, int height, int width, bool isunderside, turntype type) parameter X represents the distance from the page edge to the hotspot (as described earlier ), the height and width parameters indicate the height and width to be displayed on the current page. The isunderside parameter is used to tell the program whether it is in part C (the back of the page that is being flipped). The last parameter type indicates whether the page is left or right. Basically, the isunderside and type parameters are used to obtain the correctness of the graphic path. The parameter A is described above to represent the current angle. Parameter A is a reference and will be used to rotate the coordinates (see figure 4 and figure 5) before being drawn ).
Use Code
Install controlsFor simplicity, this control has its own image. The code for initializing the image is in the loadsamples () method. This method is called in the constructor of the sample class.
Control the page turning speed and numberThe page turning speed is controlled by a timer. The public attribute tickspeed can be used to control the page turning speed (in milliseconds ), the number of frames of an animation is controlled by the distance between the hot spots of each timer. The public attribute is exposed to the outside world to control the moving distance x.
Adjust heightCutting along the top of the back page is a problem. The public property heightadjustment is used to leave a blank area on the top of the control for cropping.
Start AnimationThis component exposes two methods to start animation. Animaterightpageturn () and animateleftpageturn ().
NotesI tried to illustrate the value of X in the nonlinear equation H = x Tan (45 + (45 * (x)/page_width) when H = page_height, my brute-force code is included in the source code. Is there another more elegant way? (The source code of the program can be
Http://download.csdn.net/source/381727Download.
