【silverlight】手把手教你如何实现页面翻转效果

The Secret Behind the Page Flip Technique

Two Flavors of Page Flip

The Page Flip technique has been around for several years in Flash. However, not all implementations are equal. Usually, the premium page flip components that are sold to developers are substantially different than the free page flip tutorials you might find online. The biggest difference is in the range of motion of the page corner being flipped. Most free page flip tutorials have a fixed radius motion path instead of a wider range of motion. In other words, no matter where you drag your mouse, the page corner will stay fixed to a curve as it travels from one side to the other. The math behind this technique is rather straightforward and variations of its implementation are found all over the place. The problem, though, is that the premium page flip technique allows a far greater range of motion while flipping the page (as shown above), which yields a much richer experience. However, nobody ever talks about how this one is done!

The Page Flip in Silverlight

So what we're going to do today is explain the mathematics behind a premium page flip experience engineered in Silverlight. The Silverlight implementation shown above was solved using trigonometry, clever masking and a little "smoke and mirrors" magic for the shadows. As with many of my blog posts, the effect can usually be split into the mechanics of the effect(the math part) and the presentation (the rendering tricks). Since Silverlight and Flash handle the mechanics of masking, clipping and rendering transforms differently, this tutorial is aimed primarily at Silverlight developers. However, the mathematical secrets behind the Page Flip technique are applicable to interactive developers in any language and this tutorial focuses primarily on explaining the rotational mechanics of the solution.

Step 1: Follow the Mouse, Constrain the Corner Point

[ Download BlogPageFlipStudy01.zip ]

PageFlipStudy01 sets up the framework for what we need to do. Please review it carefully, since the next 3 studies are built on top of each other. If you open it up, you'll notice the solution only has MainPage.xaml and a Dot.xaml control I created to visualize the solution variables so far. If you look over the MainPage.xaml.cs code, you'll see that the loaded() function mainly initializes variables and setups up the Mouse event handlers. All the logic happens in the CompositeTarget.Rendering() animation loop. Here are the key variables, as illustrated above:

M: The position of the Mouse as set by the MouseMove() event F: The mouse Follower that allows us to gracefully ease toward the raw mouse position C: The Constraint point which defines where the page corner will eventually be R1: The Radius point on the constraining circumference of the arc that defines the maximum page width allowed. SC: Spine Center SB: Spine Bottom EB: Edge Bottom

And here is the main constraint logic in the animation loop:



The most important variable at this point is our calculated constraint (dot C above). I never use the positional data from the Mouse events directly, but usually create a Follower variable that constantly eases toward the raw mouse position. However, for the page flip effect to work, the Constraint point that positions the page corner needs to respect the maximum width of the page. In other words, the line SB > C can never be longer than the line SB > EB .

Step 2: Adding the Second Constraint and Defining the Critical Triangle

[ Download BlogPageFlipStudy02.zip ]

In PageFlipStudy02 , we need to add an additional radius constraint R2 to define the maximum distance the page corner can be from the spine top (dot ST above). In other words, the line ST > C cannot be longer than the line that would connect ST and R2 . Here is the additional constraint code for the second constraining radius:



Now that the corner point C has been constrained between the two radii, we can get to the heart of the solution; the critical triangle. The critical triangle is creating by taking the bisector of line C > EB , which is marked by dot T0 . Shoot out a line perpendicular to the bisector toward the page bottom, and you get T2 . You then close up the triangle with T1 . This critical triangle will be used to control both the location and rotation of the Page object and the Rectangle that can serve as your clipping boundary. Here is the logic that calculates the tangent:



You may want to experiment with this skeleton and then experiment with the original page flip solution at the start of this article and see if you figure out how the properties of the critical triangle are used in a rendered solution.

Step 3: Adding the Page and Rotating the Corner

[ Download BlogPageFlipStudy03.zip ]

The biggest change in PageFlipStudy03 is the addition of a pageBack.xaml control that contains the page graphic we want to display. If you look at the control, you'll notice that both the positional and rotational point of the control is located at its bottom left corner. This makes sense, since when the page is finally flipped, the corner you're trying to flip is its bottom left corner. In MainPage.xaml.cs, the positioning and rotating of the page is calculated like so:



The important thing to realize is that the angle defined by T2 to C defines the amount of rotation needed for the page control if you anchor it to the constrained corner point C . You can determine the angle in Radians by performing a Math.atan2() operation on the variables shown above. Once you have this tangent value, you can set the page control's rotation angle to this value after converting it from Radians to Degrees (by multiplying by Math.PI/180.0), and the Page being flipped will always intersect with T2 .

Step 4: Defining the Clipping Region

[ Download BlogPageFlipStudy04.zip ]

Up to this point, you have all the logic required to constrain and rotate the page properly. The last essential step, however, is defining a clipping region that will also be animated to define what portion of the page should be visible during the flip. Since the focus of this tutorial is to understand the underlying math of the technique, though, I'll keep the rectangle visible so you can see exactly what is going on.

The red Rectangle above that can give me the points for a clipping path was created in such a way that it's renderTransformOrigin lines up to wherever T2 is. You calculate its position and rotation like so:



Inevitably, though, when you want to implement this solution, the red Rectangle object used above will need to be converted to a collection of Path figure segments within a PathGeometry that defines the clipping region for the page control (it's easier doing it this way than trying to perform a complex rotation on a clipping path, believe me). The good news is that Silverlight's GeneralTransform object makes this very easy:


That's it! The purple region above where the blue page and the red rectangle overlap defines how much of the page is visible as your flip it. Using the calculated points above, you can convert this rectangle to a proper pathGeometry that clips the page control, making it look like the page is being revealed by being flipped over. This trigonometry defines the mathematical underpinnings of the premium page flip effect. From here, you can use this structure to add your shadows and add multiple pages. Flipping from left to right is simply a reversal of the geometry and flipping from the top is a basic inversion. However, I'll leave it for you to add the shading and multiple page logic. Have fun!