The market for mobile apps today is quite competitive and as such you need
ways to pull your app out of the pack. Aside from starting with a great design,
eye candy such as animations is one way in which apps differentiate themselves
from one another. Traditionally, adding animations was a fairly complex
process; however, Windows Phone 7
(WP7) includes very powerful tools for creating animations. You could use the Microsoft
Expressions Blend application for creating animations using a designer.
However, Microsoft Expressions Blend is really a designer tool and not geared
towards developers. Luckily, the ability to create animations is accessible in
the eXtenstible
Application Markup Language (XAML) editor as well as C#
within Visual Studio.
Within WP7, animations are grouped together in one or more Storyboards. Each
Storyboard can perform multiple animations on one or more objects within the
page. The Storyboard is essentially a way to logically group animations. For
instance, when a user touches a button you could group all of the animations to
occur as a result of the button press in a single Storyboard. The basic types of
animations, which can be performed within a Storyboard are listed below:
- ColorAnimation – Used to animate the color change of an
element on the page. - DoubleAnimation – Allows you to animate a property value that
accepts a double value such as Opacity. - PointAnimation – Used to animate a point value, which
allows for an element to move around the screen.
There are a couple of other advanced animation types, which are not listed
above; however, for the most part the other animation types provide additional
control including key frame type animations. To demonstrate the animation we
will create simple Fade-In and Fade-Out Storyboards. Listed below is the XAML
markup showing a FadeTitleOut and FadeTitleIn Storyboards.
<phone:PhoneApplicationPage.Resources> <Storyboard x_Name="FadeTitleOut"> <DoubleAnimation Storyboard.TargetName="PageTitle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" /> </Storyboard> <Storyboard x_Name="FadeTitleIn"> <DoubleAnimation Storyboard.TargetName="PageTitle" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:1" /> </Storyboard> </phone:PhoneApplicationPage.Resources>
As you can see, the two Storyboards are contained within the Page Resources. The first Storyboard called FadeTitleOut contains a single DoubleAnimation, which will target a control called PageTitle. The animation will target the control’s Opacity property and will adjust the value from 1.0 to 0.0 over 1 second. So if you were to start this animation the PageTitle will slowly fade into the background over 1 second. The second Storyboard called FadeTitleIn is almost identical expect for the change in the From and To values. To start one of these animations from C# is fairly easy. The snippet shows how to start each animation from a button click event.
private void btnFadeIn_Click(object sender, RoutedEventArgs e)
{
FadeTitleIn.Begin();
}
private void btnFadeOut_Click(object sender, RoutedEventArgs e)
{
FadeTitleOut.Begin();
}
As you can see, the first event handler calls the Begin() method on the FadeTitleIn Storyboard. Similarly, the second event handler launches the FadeTitleOut Storyboard. However, a more real-world example might be to first fade the title out, change the text and fade it back in. Thus you would need to wait until the fade out Storyboard completes before changing the Text, and then launch the fade in Storyboard. The Storyboard contains an event called Completed, which can be used for this very purpose. The following code snippet demonstrates this example scenario.
private void btnChangeTitle_Click(object sender, RoutedEventArgs e)
{
FadeTitleOut.Begin();
FadeTitleOut.Completed += delegate
{
PageTitle.Text = "New Title";
FadeTitleIn.Begin();
};
}
In this example, we first launch the fade out Storyboard and add a delegate to fade out Storyboard. Once completed we change the title and fade the title back in.
Conclusion
As you can see from the above example, to fade the Title out slowly, change
it and fade it back in is simple but effective. While this was a very simple
example it is effective and a starting place to build upon more complex effects
to use within your application. While not a replacement for a well-designed
application and functionality, animations can be used to make your app more
appealing and fun to use for the user.
