Quickstart: Animations for Windows Phone

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

In Windows Phone, animations can enhance your apps by adding movement and interactivity. By animating a background color or applying an animated transform, you can create dramatic screen transitions or provide helpful visual cues. This Quickstart shows you how to create basic animations by changing property values and by using key frames.

This topic contains the following sections.

• Animating a double property
• Animating a color property
• Starting, stopping, pausing, and resuming
• Animating by using key-frames
• Animating by using easing functions
• Related Topics

Animating a double property

Windows Phone animations are created by changing property values of objects. For example, you can animate the Width of a Rectangle, the angle of a RotateTransform, or the color value of a Button.

In the following example, the Opacity property is animated.

<StackPanel>
    <StackPanel.Resources>
        <!-- Animates the rectangle's opacity. -->
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation
            Storyboard.TargetName="MyAnimatedRectangle"
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:1"
            AutoReverse="True"/>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle MouseLeftButtonUp="Rectangle_Tapped"
        x:Name="MyAnimatedRectangle"
        Width="300" Height="200" Fill="Blue" />
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
    myStoryboard.Begin();
}

' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
    myStoryboard.Begin()
End Sub

The following sections discuss the steps for animating the Opacity property and examine the XAML that is used for each step.

1. Identifying the property to animate

In this example, you're animating the Opacity property of a Rectangle. You don't have to declare the property you want to animate on the object itself. However, you typically name the object that you want to animate. Naming the object makes it easier to specify which object is being targeted by the animation. The following XAML shows how to name the RectangleMyAnimatedRectangle.

<Rectangle x:Name="MyAnimatedRectangle" ...

2. Creating a storyboard and making it a resource

A Storyboard is the container that you put animation objects into. You have to make the Storyboard a resource that is available to the object that you want to animate. The following XAML shows how to make the Storyboard a resource of the root element, which is a StackPanel.

<StackPanel x:Name="rootElement">
    <StackPanel.Resources>
    <!-- Animates the rectangle's opacity. -->
        <Storyboard x:Name="myStoryboard">
            <!-- Animation objects go here. -->
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>

3. Adding an animation object to the storyboard

Because the value of the property you are animating (Opacity) uses a double, this example uses the DoubleAnimation object. An animation object specifies what is animated and how that animation behaves. The following XAML shows how the DoubleAnimation is added to the Storyboard.

<Storyboard x:Name="myStoryboard">
     <DoubleAnimationStoryboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard>

This DoubleAnimation object specifies the following animation:

• Storyboard.TargetProperty="Opacity" specifies that the Opacity property is animated.

• Storyboard.TargetName="MyAnimatedRectangle" specifies which object this property is animating (the Rectangle).

• From="1.0" To="0.0" specifies that the Opacity property starts at a value of 1 and animates to 0 (starts opaque and then fades).

• Duration="0:0:1" specifies how long the animation lasts (how fast the Rectangle fades). Because the Duration property is specified in the form of "hours:minutes:seconds", the duration used in this example is one second.

• AutoReverse="True" specifies that when the animation ends, it goes in reverse. In the case of this example, it fades and then reverses to full opacity.

• RepeatBehavior="Forever" specifies that when the animation starts, it continues indefinitely. In this example, the Rectangle fades in and out continuously.

4. Starting the animation

A common way to start an animation is in response to an event. In this example, the MouseLeftButtonUp event is used to begin the animation when the user taps the Rectangle.

<Rectangle MouseLeftButtonUp="Rectangle_Tapped"
    x:Name="MyAnimatedRectangle"
    Width="100" Height="100" Fill="Blue" />

The Storyboard is started by using the Begin method.

myStoryboard.Begin();

Note

You can use C# or Visual Basic instead of XAML to set up an animation.

Animating a color property

The previous example showed how to animate a property that used a value of Double. What if you want to animate a Color? Windows Phone provides animation objects that are used to animate other types of values. The following basic animation objects animate properties of Double, Color, and Point, respectively:

• DoubleAnimation

• ColorAnimation

• PointAnimation

Note

You can also animate properties that use objects.

The following example shows how to create a ColorAnimation.

<StackPanel MouseLeftButtonUp="Rectangle_Tapped">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
        <!-- Animate the background color of the canvas from red to green over 4 seconds. -->
            <ColorAnimation Storyboard.TargetName="mySolidColorBrush"
                Storyboard.TargetProperty="Color"
                From="Red" To="Green" Duration="0:0:4" />
        </Storyboard>
    </StackPanel.Resources>
    <StackPanel.Background>
        <SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
    </StackPanel.Background>
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
    myStoryboard.Begin();
}

' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
    myStoryboard.Begin()
End Sub

Starting, stopping, pausing, and resuming

The previous example showed how to start an animation by using the Begin method. Storyboard also has Stop, Pause, and Resume methods that can be used to control an animation. The following example creates four Button objects that enable the user to control the animation of an Ellipse across the screen.

<Canvas>
    <Canvas.Resources>
        <Storyboard x:Name="myStoryboard">
        <!-- Animate the center point of the ellipse. -->
        <PointAnimation Storyboard.TargetProperty="Center"
            Storyboard.TargetName="MyAnimatedEllipseGeometry"
            Duration="0:0:5"
            From="20,200"
            To="400,100"
            RepeatBehavior="Forever" />
        </Storyboard>
    </Canvas.Resources>
    <Path Fill="Blue">
        <Path.Data>
        <!-- Describe an ellipse. -->
            <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
            Center="20,20" RadiusX="15" RadiusY="15" />
        </Path.Data>
    </Path>
    <StackPanel Orientation="Vertical" Canvas.Left="60" Canvas.Top="265">
      <StackPanel Orientation="Horizontal">
        <!-- Button that begins animation. -->
        <Button Click="Animation_Begin"
            Width="165" Height="130" Margin="2" Content="Begin" />
        <!-- Button that pauses animation. -->
        <Button Click="Animation_Pause"
            Width="165" Height="130" Margin="2" Content="Pause" />
      </StackPanel>
      <StackPanel Orientation="Horizontal">
        <!-- Button that resumes animation. -->
        <Button Click="Animation_Resume"
            Width="165" Height="130" Margin="2" Content="Resume" />
        <!-- Button that stops animation. Stopping the animation returns the
        ellipse to its original location. -->
        <Button Click="Animation_Stop"
            Width="165" Height="130" Margin="2" Content="Stop" />
      </StackPanel>
    </StackPanel>
</Canvas>

private void Animation_Begin(object sender, RoutedEventArgs e){
    myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e){
    myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e){
    myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e){
    myStoryboard.Stop();
}

Private Sub Animation_Begin(sender As Object, e As RoutedEventArgs)
    myStoryboard.Begin()
End Sub
Private Sub Animation_Pause(sender As Object, e As RoutedEventArgs)
    myStoryboard.Pause()
End SubPrivate Sub Animation_Resume(sender As Object, e As RoutedEventArgs)
    myStoryboard.[Resume]()
End Sub
Private Sub Animation_Stop(sender As Object, e As RoutedEventArgs)
    myStoryboard.[Stop]()
End Sub

Animating by using key-frames

Up to now, the examples in this Quickstart have shown animating between two values. (These are called From/To/By animations.) Key-frame animations let you use more than two target values and control an animation's interpolation method. By specifying multiple values to animate, you can make more complex animations. By specifying the animation's interpolation (specifically, by using the KeySpline property), you can control the acceleration of an animation.

The following example shows how to use a key-frame animation to animate the Height of a Rectangle.

<StackPanel Background="#FDF5E6">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="myRectangle"
            Storyboard.TargetProperty="Height">

            <!-- This key frame resets the animation to its starting
            value (30) at the beginning of the animation. -->
            <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />

            <!-- Spline animations are used to create acceleration. This
            SplineDoubleKeyFrame creates an animation that starts out slow
            and then speeds up. The rectangle "falls". -->
            <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300"
            KeyTime="0:0:0.8" />

            <!-- This spline animation creates the "bounce" at the end where
            the rectangle shortens its length quickly at first and then
            slows down and stops. -->
            <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250"
            KeyTime="0:0:1.5" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" MouseLeftButtonUp="Rectangle_Tapped" Fill="Blue" Width="200" Height="30" />
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
     myStoryboard.Begin(); 
}

' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
    myStoryboard.Begin()
End Sub

The XAML includes the following three key frames. Each key frame specifies a value to animate to at a certain time. The entire animation takes 1.5 seconds.

• The first key frame in this example is a LinearDoubleKeyFrame. LinearTypeKeyFrame objects such as LinearDoubleKeyFrame create a smooth, linear transition between values. However, in this example, it is just used to specify that the animation is at value 30 at time 0.

• The second key frame in this example is a SplineDoubleKeyFrame, which specifies that the Height of the Rectangle is 300 at time 0.8 seconds after the animation begins. SplineTypeKeyFrame objects such as SplineDoubleKeyFrame create a variable transition between values according to the value of the KeySpline property. In this example, the Rectangle begins by moving slowly and then speeds up toward the end of the time segment.

• The third key frame in this example is a SplineDoubleKeyFrame, which specifies that the Height of the Rectangle is 250 at time 1.5 seconds after the animation begins (0.7 seconds after the last SplineDoubleKeyFrame ended). In contrast to the previous SplineDoubleKeyFrame, this key frame makes the animation start off fast and slow down toward the end.

Perhaps the trickiest property used by the SplineDoubleKeyFrame is the KeySpline property. This property specifies the first and second control points of a Bezier curve, which describes the acceleration of the animation.

Animating by using easing functions

Easing functions allow you to apply custom mathematical formulas to your animations. For example, you may want an object to realistically bounce or behave as though it were on a spring. You could use Key-Frame or even From/To/By animations to approximate these effects, but it would take a significant amount of work and the animation would be less accurate than using a mathematical formula.

Besides creating your own custom easing function by implementing the IEasingFunction interface, you can use one of several easing functions provided by the runtime to create common effects. The following example demonstrates the easing functions that come with the runtime. Select an easing function from the dropdown, set its properties, and then run the animation. The XAML for the animation is shown on the lower-right of the example.

Below is a list of the easing functions demonstrated in the example above along with a quick summary of what it does.

Easing function	Summary
BackEase	Retracts the motion of an animation slightly before it begins to animate in the path indicated.
BounceEase	Creates a 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.
QuarticEase	Creates an animation that accelerates and/or decelerates using the formula f(t) = t4.
QuinticEase	Create 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.

You can apply these easing functions to Key-Frame animations using either EasingDoubleKeyFrame, EasingPointKeyFrame, or EasingColorKeyFrame. The following example shows how to use key frames with easing functions associated with them to create an animation of a Rectangle that contracts upward, slows down, then expands downward (as though falling) and then bounces to a stop.

<StackPanel Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
            Storyboard.TargetProperty="Height"
            Storyboard.TargetName="myRectangle">

            <!-- This keyframe animates the ellipse up to the crest
            where it slows down and stops. -->
            <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>

            <!-- This keyframe animates the ellipse back down and makes it bounce. -->
            <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
                <EasingDoubleKeyFrame.EasingFunction>
                <BounceEase Bounces="5" EasingMode="EaseOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" MouseLeftButtonUp="Rectangle_Tapped" Fill="Blue" Width="200" Height="200" />
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
     myStoryboard.Begin();
}

' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As MouseEventArgs)
    myStoryboard.Begin()
End Sub

In addition to using the easing functions included in the run-time, you can create your own custom easing functions by inheriting from EasingFunctionBase.

See Also

Other Resources

Animations, motion, and output for Windows Phone