Animations

Silverlight quickstart for Windows Phone development

In Silverlight for Windows Phone, animations can enhance your applications 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 QuickStart contains the following sections:

• Animating a Double Property
• Animating a Color Property
• Starting, Stopping, Pausing, and Resuming
• Animating Using Key-Frames
• Animating Using Easing Functions

Animating a Double Property

Animations in Silverlight for Windows Phone are created by animating 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. To try this live example, click the Rectangle to see it fade in and out of view.

XAML

C#

Visual Basic

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

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 Rectangle MyAnimatedRectangle.

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.

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.

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.

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.

The StoryBoard is started by using the Begin method.

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? Silverlight for 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

The following example shows how to create a ColorAnimation. To try this live example, click the Rectangle to change the background color of the canvas from red to green over a period of four seconds.

XAML

C#

Visual Basic

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. To try this live example, click the buttons to see how the animation behaves.

XAML

C#

Visual Basic

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. To try this live example, click the Rectangle to see the effect.

XAML

C#

Visual Basic

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.

The following example shows how to use a key-frame animation to animate the Height of a Rectangle. To try this live example, click the Rectangle to see the effect.

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

• 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.

In the previous example, the easing functions are applied to a From/To/By animation. You can also 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. To try this live example, click the Rectangle to see the effect.

XAML

C#

Visual Basic

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

See Also

• Animation Overview
• Key-Frame Animations
• Working with Animations Programmatically