Animation overview

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.

Back to top

Storyboards

Storyboards are containers that hold animation timelines. Expression Blend 2, includes a new 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

Also new to Expression Blend 2 is a pop-up menu that you can use 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 properties on 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 at the end of its cycle.

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 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 Try it: Create a WPF user control or Create a new user control in your Silverlight 2 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 control's template. 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 Controls overview. For a WPF example, see Try it: Add animation to a button.

Storyboards can be controlled (started, stopped, paused) by using triggers that are set on objects (Windows Presentation Foundation projects only) or by using event handlers. For more information, see Controlling when your storyboard runs or Create a button that controls a storyboard in a Silverlight application.

Back to top

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

Back to top

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 whole objects, such as a rectangle object, or 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 (under How does animation work in Expression Blend?), 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.

Back to top

Transition between keyframes

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:

• The Ease In value modifies how the property value changes as time approaches the keyframe. You can set the degree of ease by specifying a value from 0 percent (no ease) to 100 percent (full ease, which is half the time distance between the previous keyframe and the edited keyframe).

• The Ease Out value modifies how the property value changes as time moves away from the keyframe. You can set the degree of ease by specifying a value from 0 percent (no ease) to 100 percent (full ease, which is half the time distance between the edited keyframe and the next keyframe).

• Hold Out doesn’t interpolate changes over time; instead, it makes an abrupt change to the new property value when the playhead reaches the keyframe where the change occurs.

• Linear interpolation changes the property value in equal increments between the keyframes. The interpolation between two keyframes will be linear if the Ease Out value is 0 percent for the first keyframe and the Ease In value is 0 percent for the second keyframe.

You can modify keyframe interpolation values by right-clicking a keyframe on the timeline.

New to Expression Blend 2, you can now use a key spline to define the transition between keyframes by modifying a spline in a graphical editor. You can also convert key spline values to resources and reuse them.

Key spline editor for creating custom interpolation between keyframes

For an example, see Change animation interpolation between keyframes.

Back to top

Creating timelines manually or by using motion paths

Note

Motion paths are not supported in Microsoft Silverlight 1.0 or Silverlight 2 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 the New button 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 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 (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 (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.

Back to top

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

Back to top

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.

Back to top

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 Custom Controls tab of the Asset Library 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 Asset Library. On the Project 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 Microsoft Silverlight 1.0 or Silverlight 2 projects. However, a feature named States provides similar functionality in Silverlight 2 projects.

For an example, see Try it: Create a WPF user control or see "Storyboards in user controls" under Controlling when your storyboard runs.

Back to top

Testing storyboards

Storyboards in a 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 Test Project on the Project menu, or press F5). While in the authoring environment, you can use the playback controls located under Objects and Timeline in the Interaction panel:

Playback controls under Objects and Timeline

• 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 category in the Interaction 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 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.

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.

Back to top

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

Note

Triggers are not available in Microsoft Silverlight 1.0 or Silverlight 2 projects. However, a feature named States provides similar functionality in Silverlight 2 projects.

Back to top

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 Windows Presentation Foundation or Silverlight 2 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 Load a new page dynamically in your Silverlight 2 application). In a Silverlight 1.0 project, code-behind files are written in JavaScript (for example, see Create a button that controls a storyboard in a Silverlight application).

Back to top

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

Back to top