Animating the Entire Page When Orientation Changes
,While animating UIElements is performed within the page, to animate the page itself requires implementation of a custom PhoneApplicationFrame. This is achieved by subclassing the PhoneApplicationFrame class, and then subscribing to the frame’s OrientationChanged event to initiate the animation.
To replace your application’s standard PhoneApplicationFrame with a custom frame, modify the App class, either in XAML or in the code-beside, to use the custom frame as the application’s RootVisual.
The following excerpt shows how the App.xaml file can be modified to use a custom PhoneApplicationFrame:
<Application.RootVisual>
<unleashed:AnimateOrientationChangesFrame x:Name="RootFrame">
<!-- Content omitted. -->
</unleashed:AnimateOrientationChangesFrame>
</Application.RootVisual>
If the RootVisual is assigned in the App.xaml.cs file, as is the case by default, modify the InitializedPhoneApplication method to assign a custom frame, as shown in the following excerpt:
void InitializePhoneApplication()
{
if (phoneApplicationInitialized)
{
return;
}
RootFrame = new AnimateOrientationChangesFrame();
// Content omitted.
}
Microsoft’s David Anson has written two custom PhoneApplicationFrames that perform rotation and fade animation when an orientation change occurs. With David’s permission I have included them in the downloadable sample code.
The first is a frame that fades in content, called FadeOrientationChangesFrame. This class uses a WritableBitmap to create an image overlay, which animates the Opacity property of the image. By using a WritableBitmap to capture the screen, the performance of the transition is optimized and is unaffected by the page composition, that is, more controls won’t risk slowing the animation.
The second frame, the AnimateOrientationChangesFrame, is less subtle and rotates the page when the orientation changes (see Figure 4.4).
FIGURE 4.4 The AnimateOrientationChangesFrame class rotates content when the page orientation changes.
To modify the default behavior of either the FadeOrientationChangesFrame or AnimateOrientationChangesFrame, use the AnimationEnabled, Duration, and EasingFunction properties.
AnimationEnabled allows you to turn off the animation at runtime.
The Duration property dictates how long the animation will take to complete, which if made too long—more than half a second—risks frustrating the user.
The EasingFunction property is used to control the speed of the animation. With easing, you can create a more realistic rate of acceleration and deceleration, such as when creating a bounce effect or to control other types of motion.
The following is a list of the various IEasingFunctions available in the Windows Phone FCL (Framework Class Library), located in the System.Windows.Media.Animation namespace of the System.Windows assembly:
BackEase—Retracts the motion of an animation slightly before it begins to animate along the path.
BounceEase—Creates an animated bouncing effect.
CircleEase—Creates an animation that accelerates and/or decelerates using a circular function.
CubicEase—Creates an animation that accelerates and/or decelerates using the formula f(t) = t3.
ElasticEase—Creates an animation that resembles a spring oscillating back and forth until it comes to rest.
ExponentialEase—Creates an animation that accelerates and/or decelerates using an exponential formula.
PowerEase—Creates an animation that accelerates and/or decelerates using the formula f(t) = tp, where p is equal to the Power property.
QuadraticEase—Creates an animation that accelerates and/or decelerates using the formula f(t) = t2. This is the default IEasingFunction of the FadeOrientationChangesFrame class.
QuarticEase—Creates an animation that accelerates and/or decelerates using the formula f(t) = t4. This is the default IEasingFunction for the AnimateOrientationChangesFrame class.
QuinticEase—Creates an animation that accelerates and/or decelerates using the formula f(t) = t5.
SineEase—Creates an animation that accelerates and/or decelerates using a sine formula.