Animating objects

Animation creates an illusion by quickly cycling through a series of images, each slightly different from the previous one. The brain perceives the sequence of images as a single changing scene. In film, a camera creates this illusion by recording many photographs, or frames, each second. When the frames are played back by a projector, the audience sees a moving picture. Computer animation is similar except that recorded frames can be further apart in time because the computer will interpolate and animate the changes in between.

How does animation work in Expression Blend?

In Microsoft Expression Blend, animations are based on keyframes that define the start and end points of a smooth visual transition. To create an animation in Expression 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, Expression 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

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 whole timeline. However, you can use keyframes to change their visibility properties and make the objects appear or disappear.

Note

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

Storyboards

Storyboards are containers that hold animation timelines. Expression 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.

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 and Rename a storyboard.

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.

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.

  For an example, see Create a simple animation.

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

  For an example, see Create an empty user control or Create a new user control in your project.

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

  For more information, see Choosing and using interactive controls. For a Windows Presentation Foundation (WPF) example, see Try it: Add animation to a button.

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

Storyboards can be controlled (started, stopped, paused) by using triggers that are set on objects, by using behaviors, or by using event handlers.

For more information, see Controlling when your storyboard runs.

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

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

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.

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 selecting predefined Ease In or Ease Out 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.

Creating timelines manually or by using motion paths

Note

Motion paths are not supported in Microsoft Silverlight projects.

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

Generating an animation timeline automatically by using the Convert to Motion Path tool enables 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 following image, the perimeter of an ellipse becomes the path of motion for the blue circle.

Creating an animation timeline by using a motion path

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

For an example of how to use motion paths to generate animation timelines, see Create, modify, or delete a motion path.

Motion paths are not represented on the timeline by keyframes. Therefore, you cannot modify interpolation effects. However, you can modify the repeat count.

For more information, see Set the loop duration.

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.

For more information, see "To make the moving object continually orient itself to the path" under Create, modify, or delete a motion path.

After the motion path is generated, you can add manual animations to the same timeline that contains the motion path.

Note

You can not reverse a motion path in Expression Blend by reversing the storyboard that contains the motion path. You can, however, transform (flip) the path to make it run in reverse, or you can use the AutoReverse storyboard property to make the storyboard play forward and then in reverse.

Using multiple and overlapping animation timelines

The storyboard structure in Expression 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.

For an example, see Try it: Create overlapping animations.

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, 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 Try it: Playing with handoff and nonhandoff animations.

Note

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

Note

After you add a user control to your project, you must build your project to make the user control appear in the Assets panel. On the Projects menu, click Build Project.

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.

  Note

  Triggers are not available in Silverlight projects. However, you can use behaviors to control storyboards and state transitions.

  For more information, see Working with behaviors.

For more information about user controls, see Create an empty user control, or see "Storyboards in user controls," in Controlling when your storyboard runs.

Testing storyboards

Storyboards in an Expression 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.

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 and Change the snap resolution.

Note

Timeline snapping does not apply to the frame rate or to the speed of your animation when your application runs. For more information, see "Frame rates," earlier in this topic.

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.

Triggers

You can use triggers 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 runs the timeline when your application first loads. You can modify this trigger or create other triggers to run the timeline when the user clicks a button or performs some other action.

For detailed information about triggers, see Using triggers to define the behavior of a WPF control.

Note

Triggers are not available in Silverlight projects. However, you can use behaviors to control storyboards and state transitions.

For more information, see Working with behaviors.

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

Event handler methods are defined in the code-behind file of your document. In a WPF or Silverlight project, code-behind files are written in Microsoft Visual C# or Microsoft Visual Basic .NET.

For examples, see Control media using triggers in a timeline and Try it: Load a new page dynamically in your Silverlight application.

Coded animation

When working in Design view in Expression Blend, you can create whole 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 the animation work that you want to do in Design view of Expression Blend.

Some advanced animation scenarios 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 the technology your application is using (either WPF or Silverlight).

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 resemble 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 previous XAML example are as follows:

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

• The BeginTime attribute specifies the start time of the animation (at the 0-second mark in this case).

• 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 (the Y position property of the rectangle in this case).

• The KeyTime attributes specify at what time intervals the target property changes, and to what value. In Design view of Expression Blend, these elements are represented by keyframes on the timeline.

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

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

For more information about how to create and manipulate 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 posted on the Microsoft Expression  website.

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.