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!