Getting Started: Animation

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

Adding animations

In iOS, you create animation effects programmatically. You might use animations provided by the block-based UIView class's animateWithDuration methods, or the older non-block based methods. Or you might explicitly use the CALayer class to animate layers. Animations in Windows Store apps can be done programmatically as well, but they can also be done declaratively with Extensible Application Markup Language (XAML). You can use Microsoft Visual Studio to edit XAML code directly. Also, Visual Studio comes with a tool called Blend for Microsoft Visual Studio 2013, which edits XAML code for you in the background as you work with animations in a designer. In fact, Blend even allows you to open, design, build, and run complete Visual Studio projects. The following walkthrough lets you try this out.

Let's try it out. Create a new project (for either platform, or universal) and name it something like "SimpleAnimation". In this project, we're going to move a rectangle, fade it away, and then bring it back into view. Animations in XAML are based on the concept of storyboards (not to be used with iOS storyboards). Storyboards use keyframes to animate property changes. There are no implicit animations in Windows Store apps but, as you'll see, animating properties is straightforward.

With your project open, in Solution Explorer, press and hold the project's name and then tap Open in Blend, as shown in the following figure. Visual Studio continues to run in the background.

After Blend starts, you should see something similar to the following figure.

Next, tap the Rectangle in the Tools window to select it, and then draw a rectangle in Design View, as shown in the following figure.

To make the rectangle green, in the Properties window, in the Brush area, tap the Solid color brush button, tap the Color eyedropper icon, and then tap somewhere in the green band of hues.

To begin animating the rectangle, in the Objects and Timeline window, tap the plus symbol (New) button as shown in the following figure, and then tap OK.

A storyboard appears in the Objects and Timeline window. The Design View display changes to show that Storyboard1 timeline recording is on. To capture the current state of the rectangle, in the Objects and Timeline window, tap the Record Keyframe button just above the yellow arrow, as shown in the following figure.

Now let's move the rectangle and fade it away. To do this, drag the yellow arrow to the 2-second position, and then drag the rectangle slightly to the right. Then, in the Properties window, in the Appearance area, change the Opacity property to 0, as shown in the following figure. To preview the animation, tap the Play button, which is circled in the following figure.

Next, let's bring the rectangle back into view. In the Objects and Timeline window, tap Storyboard1. Then, in the Properties window, in the Common area, tap AutoReverse, as shown in the following figure.

Finally, tap the Play button to see what happens.

You can run the project by tapping the Project menu and then tapping Run Project (or just press F5). If you do this, you'll see your green rectangle, but the rectangle won't animate. To start the animation, you'll need to add a line of code to the project. Here's how.

In Blend, tap the File menu, tap Save, and then return to Visual Studio. If Visual Studio displays a dialog box asking whether you want to reload the modified file, tap Yes. Open the MainPage.xaml.cs file, and add the following code.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Add the following line of code.
    Storyboard1.Begin();
}

Run the project again, and watch the rectangle animate.

If you open the MainPage.xaml file, in XAML view you'll see the XAML code that Blend added for you as you worked in the designer. In particular, look at the code in the <Storyboard> and <Rectangle> elements. The following code shows an example. Ellipses indicate unrelated code omitted for brevity, and line breaks have been added for code readability.)

...
<Storyboard 
        x:Name="Storyboard1" 
        AutoReverse="True">
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="185.075"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="0"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2" 
                Value="2.985"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="(UIElement.Opacity)" 
            Storyboard.TargetName="rectangle">
        <EasingDoubleKeyFrame 
                KeyTime="0" 
                Value="1"/>
        <EasingDoubleKeyFrame 
                KeyTime="0:0:2"
                Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
...
<Rectangle 
        x:Name="rectangle" 
        Fill="#FF00FF63" 
        HorizontalAlignment="Left" 
        Height="122" 
        Margin="151,312,0,0" 
        Stroke="Black" 
        VerticalAlignment="Top" 
        Width="239" 
        RenderTransformOrigin="0.5,0.5">
    <Rectangle.RenderTransform>
        <CompositeTransform/>
    </Rectangle.RenderTransform>
</Rectangle>
...

For more info about animations, see Animating your UI.

Note  For info about animations for Windows Store apps using JavaScript and HTML, see Animating your UI (HTML).

 

Next step

Getting started: What next?