Content Index Search
 

Animation and interactivity overview

Animation is an illusion created by rapidly cycling through a series of images, each slightly different than the last. The brain perceives the group of images as a single changing scene. In film, this illusion is created by using cameras that record a large number of photographs, or frames, each second. When the frames are played back by a projector, the audience sees a moving picture.

Frames played back by a projector

Computer animation is similar. For example, a program that helps you make an animation of a rectangle that moves from left to right might work as follows:

How does animation work in Expression Blend?

In Microsoft® Expression Blend™, animations are based on keyframes. To create an animation in Expression Blend, 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, 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 1 second. When you run an animation timeline, Expression Blend interpolates the property changes over the designated amount of time and displays the results in your application. You can animate any property that belongs to an object on the artboard this way, even non-visual properties.

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

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

In some computer animation programs, you can create frame-by-frame animations, which means that every frame can contain a different image (or object). The resulting animations can be very large and resource-intensive at run time. For this reason, Expression Blend animation is based on keyframes that record changes to properties, animating the transition between property changes at run time. Additionally, in Expression Blend, all objects that you might want to have appear or disappear during an animation timeline are present throughout the entire timeline, but you can use keyframes to change their visibility properties, making the objects appear or disappear.

Note Although you cannot spontaneously create new objects during an animation timeline in Expression Blend, you can generate new objects and new animation timelines programmatically in code-behind files. For more information, see the Animation and Timing topics in the Windows Presentation Foundation section of MSDN.

Timelines

Timelines provides structure for the animation sequences in your application. An animation in Expression Blend is composed of a timeline on which you record keyframes that represent the timing of property changes. Timelines can be thought of as layers of property changes being applied to objects on the artboard.

Animation timelines are created using the Objects and Timeline section of the Interaction panel (for a roadmap, see Interaction 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.

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

Timelines can be controlled (started, stopped, paused) by using triggers that are set on objects. For more information, see Triggers below.

Keyframes

A keyframe Keyframe is a marker on the timeline that indicates when a property change occurs. There are four types of keyframes in Expression Blend:

Knowing the difference between keyframes is helpful because you may not always need 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 in order to modify large groups of properties at once with a single selection, such as when you want to move keyframes along the timeline. For an example, see Move a keyframe. You need to 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.

Keyframe interpolation describes how property changes are animated in the span of time between two keyframes. Multiple interpolation methods may be assigned to a span of time to create more complex value changes:

You can modify keyframe interpolation values by right-clicking a keyframe on the timeline. For an example, see Change animation interpolation between keyframes.

Creating timelines manually or by using motion paths

Creating an animation timeline manually gives you the most control over the movement and the number of the objects that are animated in your timeline. You can also animate between colors. To create an animation timeline manually in Expression Blend, click the Create new timeline Create new timeline button button under Objects and Timeline, and then record keyframes by first moving the timeline play head Timeline play head, and then modifying an object on the artboard to generate a keyframe. For an example, see Create simple animation.

Generating an animation timeline automatically by using the  Convert to Motion Path tool allows you to have an object follow a path on the artboard, whether that path is a line or the perimeter of a shape (such as an ellipse or a rectangle). As shown in the image below, the perimeter of an ellipse becomes the path of motion for the blue circle.

Anatomy of a motion path

1 Two separate objects: an ellipse and a circle (created with the Ellipse tool).
2 The ellipse becomes a motion path. You can optionally delete the ellipse at this point.
3 A new timeline is generated that when played moves the circle along the elliptical path.

For an example of how to use motion paths to generate animation timelines, see Create a motion path. Motion paths are not represented on the timeline by keyframes, so you cannot modify interpolation effects. However, you can edit the repeat count (see Set the loop duration). After the motion path is generated, you can add manual animations to the same timeline that contains the motion path.

Using multiple and overlapping animation timelines

The timeline structure in Expression Blend allows you to have more than one animation 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 moving 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. For an example, see Create overlapping animations.

If two animation timelines animate the same property at the same time, then 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, Expression 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. For an example, see Playing with handoff animations.

Tip If two timelines animate the same property of an object, the first timeline will stop when it is interrupted, even if the timeline was set to repeat forever.

Frame rates

Animation in Expression 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 play head Timeline play head or keyframes Keyframe 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 Timeline snapping button toggle button under Objects and Timeline, and then click Snapping to display the Snap Resolution dialog.

Scenes

In Expression Blend, you can encapsulate animations inside of 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). Any user control that is a part of your application can be accessed from the Custom Controls tab of the Asset Library Asset Library button and then drawn into a document, just like any other control.

Note After you add a user control to your project, you need to build your project in order to make the user control show up in the Asset Library. On the Project menu, click Build Project.

When planning what to animate in a user control, consider the following things:

For an example, see Create a user control.

Triggers

Triggers can be used to change the state of an object on the artboard in response to events or property changes. You can use triggers to start and stop animation timelines. For example, when you create a timeline, a default trigger is created that will run the timeline when your application is first loaded. You can modify this trigger or create other triggers that will run the timeline when a button is clicked or when the user performs some other action. For detailed information about triggers, see Essentials of triggers.

Event handlers

Event handlers are methods that you program to run when a specified event (such as MouseOver) occurs. You can use an event handler instead of a trigger if you need to do more than set a property or control an animation timeline when an event occurs in your application. Event handler methods allow 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.

Event handler methods are defined in the code-behind file of your document, and written in C# or Microsoft® Visual Basic® .NET. For more information, see Event handling. For an example, see Create a new event handler method.

Coded animation

When working in Design view in Expression Blend, you can create entire animation timelines without modifying XAML or code in a code-behind file. You can also configure triggers that can start, stop, and pause animation timelines based on user interactions. You will most likely be able to do all of the animation work that you want to do in Design view of Expression Blend.

There are some advanced animation scenarios that require coding (in 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 Windows Presentation Foundation (WPF), because an application that you create visually in Expression Blend is essentially a WPF application.

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

    <Window.Resources>
        <Storyboard x:Key="MoveRight">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                    Storyboard.TargetName="rectangle" 
                    Storyboard.TargetProperty="...(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="375"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

The attributes of the preceding XAML example are as follows:

You can programmatically control animation timelines in code-behind files using C# or Visual Basic .NET. For example, to start the preceding animation timeline in a code-behind file, the C# code might look similar to the following:

    Storyboard moveRight;
    moveRight = (Storyboard)this.Resources["MoveRight"];
    moveRight.Begin(this);

For more information about creating and manipulating animation timelines in XAML and code-behind files, see the Animation and Timing topics in the Windows Presentation Foundation section of MSDN, or see the samples and tutorials that are posted on the Microsoft Expression Web site.