Animating objects (Blend for Visual Studio)

Animations can enhance your app by adding effects, movement and interactivity. For instance, animating the background color of your application or applying some animated transform can create dramatic screen transitions or help provide visual cues to your users.

How does animation work in Blend?

Blend for Visual Studio 2012 supports both traditional keyframes based animations and the new Windows 8 animations and transitions collectively known as the "Windows Animation Library." To create the traditional keyframes-based animation in Blend, you create a storyboard, and in the storyboard, you set keyframes on a timeline to mark property changes. For example, you could set a keyframe at the 0-second mark to record the position of a rectangle on the left side of the artboard, and then set a keyframe at the 1-second mark to record the position of the same rectangle on the right side of the artboard. The resulting animation would be based on the transformation that occurs on the X and Y properties of the rectangle over one second. When you run an animation storyboard, Blend interpolates the property changes over the designated period of time and displays the results in your application. You can animate any property that belongs to an object on the artboard in this manner, even nonvisual properties.

Keyframes set on a timeline in a storyboard named "MoveRight," marking property changes in the X and Y translation properties of a rectangle object

Using the Windows Animation Library

The Windows Animation Library is a collection of animations and transitions that are grouped for common user scenarios for use across the new Windows style applications. These animations provide a common definition of “personality” that can be centrally iterated and refined. These animations will help you create desirable visual experience for your app that is consistent with Windows 8. The Windows Animation Library provides a full animation engine with animations for almost every possible scenario thus reducing development overhead. In Blend, these animations and transitions are known as Theme Animations.

All common Windows 8 controls have animation built-in, and by using the control, you get the animation for free! The following image shows a list of some of the Theme Animations exposed in Blend for Windows Store app development:

For more information about Theme Animations, see States panel (XAML).

For more information about the Windows Animation namespace, see Windows.UI.Xaml.Media.Animation namespace.

Storyboards

Storyboards are containers that hold animation timelines. Blend includes a storyboard picker control, from which you can select and search for storyboards in your project.

For more information, see Open or close a storyboard (Blend for Visual Studio).

The storyboard picker listing multiple storyboards that can be opened

When a storyboard is selected, you can use a pop-up menu to duplicate, reverse, delete, rename, or close the currently selected storyboard, or you can create a new storyboard.

For more information, see Duplicate or reverse a storyboard (Blend for Visual Studio) and Rename a storyboard (Blend for Visual Studio).

The storyboard popup menu

You can set the properties of storyboards to make them automatically reverse or repeat when they reach the end of their last timeline.

For more information, see Modify a storyboard to repeat or reverse (Blend for Visual Studio).

You can create storyboards when in the following locations (or scopes) of your application:

• In the main body of your document   If the purpose of your application is to present an animation, or if you do not have to reuse the animation elsewhere, you can create your animation timelines in the main body of your document.

• In a scene or user control   If you must reuse an animation multiple times in a single document, or in another application, you can create your animation timelines in a user control. This is also useful if you want to organize your animations into different documents or projects. User controls can be added to the artboard just like any other control (such as a button). For more information, see the "Scenes" section that follows.

• In the template of a control   If you want all the controls of a specific type (such as buttons) in your application to be animated in the same way, you can create the animation in the template of the control. This does not mean that all the controls would have to look identical. If you use template binding (binding a property in the template to a property in the control to which the template is applied), each control could have a different color or other visual appearance in their animation.

• In a state   If you want to modify the animation that occurs after transitioning to a new state, you can select the state in the States panel, and then click Show Timeline  in the Objects and Timeline panel to make your changes.

  For more information about working with states, see Defining different visual states for a control (Blend for Visual Studio).

Timelines

Timelines provides structure for the animation sequences in your application. An animation in Blend is composed of a timeline on which you record keyframes that represent the timing of property changes. You can think of timelines as layers of property changes applied to objects on the artboard. Timelines are contained in storyboards.

You work with animation timelines in the Objects and Timeline panel. Using the controls available to you in this panel, you can view the artboard as it changes over time, add new timelines, modify timelines, and more.

Keyframes

A keyframe is a marker on the timeline that indicates when a property change occurs. Blend has the following four types of keyframes:

• Object-level keyframes apply to a whole object, such as a rectangle object, or to a grid that contains multiple objects. Typically, unless it was set manually by clicking the Record Keyframe button, an object-level keyframe indicates that a property is in one of the child objects that has been changed, which you can see by expanding the nodes under the object. For example, in the preceding image (in the "How does animation work in Expression Blend?" section, earlier in this topic), the keyframe set in the row on the timeline that corresponds to the rectangle is an object-level keyframe.

• Compound keyframes indicate that the property has child properties being animated. For example, in the previous image, the keyframe set in the row on the timeline that corresponds to the Translate property is a compound keyframe. You can work with compound keyframes to modify large groups of properties at the same time with a single selection, such as when you move keyframes along the timeline.

• Simple keyframes represent a single property change at that point in time. For example, in the previous image, the keyframes set in the rows on the timeline that correspond to the X and Y properties are simple keyframes. You must work with simple keyframes to perform certain actions, such as to modify the repeat count for an animation.

  For an example, see Set the loop duration (Blend for Visual Studio).

• Implicit keyframes are present when one animation is interrupted by another, and the second animation has no keyframe set at the 0-second mark. At the time of the interruption, Blend animates the change between the last known value of a property and the value that is set on the first keyframe in the second animation. The last known value is considered an implicit keyframe, even if the value is between two keyframes in the first animation. This transition is called handoff animation and is described in more detail in the "Using multiple and overlapping animation timelines" section that follows.

Knowing the difference between keyframes is helpful because you may not always want to see the details of every property being animated. Instead, you can collapse the properties of each object and view only the object-level keyframes. You can work with object-level and compound keyframes to modify large groups of properties at the same time with a single selection, such as when you want to move keyframes along the timeline.

For an example, see Paste or move a keyframe (Blend for Visual Studio).

You must use simple keyframes to perform certain actions, such as to modify the repeat count for an animation.

For an example, see Set the loop duration (Blend for Visual Studio).

Transition between keyframes

Keyframe interpolation describes how property changes are animated in the span of time between two keyframes.

You can modify keyframe interpolation values by modifying a KeySpline graph, or by using a preset EasingFunction option that represents a complex KeySpline graph.

Key spline editor for creating custom interpolation between keyframes

For more information, see Change animation interpolation between keyframes (Blend for Visual Studio).

Creating timelines manually

Creating an animation timeline manually gives you the most control over the movement and the number of objects that your timeline animates. You can also animate between colors. To create an animation timeline manually in Blend, click New  under Objects and Timeline, and then record keyframes by first moving the timeline playhead , and then modifying an object on the artboard to generate a keyframe.

For an example, see Create a simple animation (Blend for Visual Studio).

For more information, see Set the loop duration (Blend for Visual Studio).

You can also orient the animated object to the path so that whichever side of the object is pointing towards the center of the path will continue to point towards the center of the path throughout the timeline.

Using multiple and overlapping animation timelines

The storyboard structure in Blend enables you to have more than one storyboard (and multiple timelines) running at the same time in your application. For example, you can draw two circles to represent a butterfly, create an animation timeline of the butterfly that moves along a circular motion path, and then create a separate animation timeline of the wings flapping. The flapping animation can run at the same time as the circular animation without interrupting the circular animation because the timelines do not animate the same properties of the butterfly object.

If two animation timelines animate the same property at the same time, the transition between the timelines behaves differently depending on whether you record a keyframe at the 0-second mark for the second animation. If you do not record a keyframe at the 0-second mark, Blend assumes that you want to animate from the last value of the property at the moment of interruption to the value of the property at the first keyframe in the second timeline. This type of transition is called a handoff animation. For example, consider a circle that in one timeline stretches to double its width, and in a second timeline stretches to four times its width. If the second animation timeline interrupts the first and has no keyframe set at the 0-second mark, the ellipse smoothly expands from the moment when the first timeline is interrupted, to the endpoint of the second timeline (four times the original width). If the second animation timeline was not a handoff animation (if a keyframe was set at the 0-second mark), the circle would suddenly jump to the starting point of the second animation.

Frame rates

Animation in Blend is created by setting keyframes along a timeline. Interpolation between the keyframes is performed at run time. Therefore, you do not have to configure the animation frame rate. When you run your application, the .NET Framework runtime renders your animation timelines at the highest frame rate possible.

You can, however, specify the intervals on the timeline at which you can set a keyframe. This interval rate is called snap resolution because it refers to the playhead  or keyframes  snapping into place. For example, if you changed the snap resolution to 10 keyframes per second, you could set keyframes at every tenth of a second along the timeline. To change the snap resolution, click the drop-down arrow next to the snapping toggle button  under Objects and Timeline, and then click Snapping to display the Snap Resolution dialog box.

Scenes

In Blend, you can encapsulate animations inside scenes (or user controls) and then use those animations multiple times in other documents in your application. You can create a user control in a single document or in a .dll (control library) file. Any user control that is part of your application can be accessed from the Project category of the Assets panel  and then drawn into a document, just like any other control.

When you plan what to animate in a user control, consider the following issues:

• The timing of your various animations   For example, consider an application that animates a splash screen first and then animates the user interface fading into view. You can put each animation into its own user control, but leave enough time at the start of the second animation for the length of time that it takes for the splash screen animation to finish.

• The properties and triggers that you want available to your animations   For example, consider an application that contains a button, and an animation that is contained in a user control. You cannot add a trigger to the user control that will start the animation timeline when the button is clicked unless the button is also a part of the user control. Additionally, you can bind data between property values only if both properties are in the same user control.

Testing storyboards

Storyboards in an Blend project can be tested in a variety of ways, either in the authoring environment, or at run time when the application is compiled (click Run Project on the Projects menu, or press F5). While in the authoring environment, you can use the playback controls located in the Objects and Timeline panel.

Playback controls in the Objects and Timeline panel

• First Frame   Sends the playhead to the first frame of the animation.

• Previous Frame   Sends the playhead to the previous frame.

• Play   Plays the animation from the current point in time.

• Next Frame   Sends the playhead to the next frame.

• Last Frame   Sends the playhead to the last frame of the animation.

Scrubbing the timeline

Scrubbing the timeline is a useful technique for precisely controlling the speed and position of the animation you want to preview or test. Scrubbing is accomplished by dragging the playhead. As you drag the playhead, you will see the animation on the artboard. Frames can be scrubbed normally or in reverse. The speed at which the animation plays depends on the speed at which you drag the playhead.

For an example, see Scrub the timeline (Blend for Visual Studio).

Time snapping

The Objects and Timeline panel contains controls that enable you to control animation playback and navigate through time in discrete units (frames per second) determined by the snap resolution. Time snapping is used when you navigate through time using the playback controls. When you click the next frame and previous frame buttons, the playhead is sent forward or backward by the amount of frames per second that you designated. This amount of time is determined by the snap resolution.

Snap Resolution dialog box

For examples of using snap resolution, see Turn timeline snapping on or off (Blend for Visual Studio) and Change the snap resolution (Blend for Visual Studio).

Time display

The current time display shows, in MM:SS:xxx (minutes, seconds, milliseconds), the currently selected point in time. To quickly jump to a specific point in time, you can enter a numeric value in this field to jump directly there.

Playhead Position text box, reading 1.450 seconds

For an example of using the time display, see Go to a specific point in a timeline (Blend for Visual Studio).

Event handlers

Event handlers are methods that you program to run when a specified event (such as PointerOver) occurs. You can use an event handler, for example, if you have to do more than set a property or to control an animation timeline when an event occurs in your application. Event handler methods enable you to add other programming logic, such as setting a property on another object, loading a new document, creating a new object, using a mathematical calculation to animate an object, and so on. For example, if you wanted to determine what key was pressed during the KeyDown event, you would have to create an event handler method that would be called when a key was pressed, and add code to determine what key it was.

Coded animation

When working in Design view in Blend, you can create whole animation timelines without modifying XAML or code in a code-behind file. You will most likely be able to do all the animation work that you want to do in Design view of Blend.

Some advanced animation scenarios require coding (in C#, C++ or Visual Basic .NET), such as using mathematical calculations to determine the movement of an object. If you plan on manipulating animation timelines in code-behind files, it is helpful to understand the animation model of the technology your application is using.

Animation timelines are represented in XAML by a STORYBOARD element. For example, when you create an animation timeline in Design view of Blend, XAML code is generated for the animation that might resemble the following:

<Page.Resources>
<Storyboard x:Name="Layout_on_path">
<DoubleAnimation Duration="0" To="244.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-153" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<ColorAnimation Duration="0" To="#FF119B2A" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<ColorAnimation Duration="0" To="#FF0097FF" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
</Storyboard>
</Page.Resources> 

The attributes of the previous XAML example are as follows:

• The x:Key attribute specifies the name of the timeline (or storyboard).

• The Duration attribute specifies the period of time that a Timeline object is active.

• The TargetName attribute specifies the name of the element that the storyboard (or timeline) animates (an object named "rectangle" in this case).

• The TargetProperty attribute specifies the property that will change.

• In Design view of Blend, these elements are represented by keyframes on the timeline.

You can programmatically control animation timelines in code-behind files by using C#, C++ or Visual Basic .NET.

For more information on animation, see the Windows.UI.Xaml.Media.Animation namespace topic on the Windows Dev Center.