Animation and interactivity overview
- How does animation work in Expression Blend?
- Timelines
- Keyframes
- Creating timelines manually or by using motion paths
- Using multiple and overlapping animation timelines
- Frame rates
- Scenes
- Triggers
- Event handlers
- Coded animation
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:
- The program creates a timer.
- The program checks the timer at regular intervals to see how much time has elapsed.
- Each time the program checks the timer, it computes the current location for the rectangle based on how much time has elapsed.
- The program updates the location properties of the rectangle and then redraws it.
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
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.
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:
- In the main body of your document If the purpose of your application is to present an animation, or if you do not need 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 need to 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 Scenes below. For an example, see Create a user control.
- In the template of a control If you want all of the controls of a specific type (such as a button) 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 of the controls would have to look exactly the same. If you use template binding (binding a property in the template to a property in the control to which the template is applied), each of the controls could have a different color or other visual appearance in their animation. For more information, see Styles and templates. For an example, see Add animation to a button.
Timelines can be controlled (started, stopped, paused) by using triggers that are set on objects. For more information, see Triggers below.
Keyframes
A keyframe is a marker on the timeline that indicates when a property change occurs. There are four types of keyframes in Expression Blend:
- Object-level keyframes Object-level keyframes apply to entire 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 there is a property 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 Compound keyframes indicate that the property has child properties being animated. For example, in the preceding image, the keyframe set in the row on the timeline that corresponds to the Translation property is a compound keyframe. You can work with compound keyframes in order to modify large groups of properties at once with a single selection, for example when moving keyframes along the timeline.
- Simple keyframes Simple keyframes represent a single property change at that point in time. For example, in the preceding image, the keyframes set in the rows on the timeline that correspond to the X and Y properties are simple keyframes. You need to work with simple keyframes to perform certain actions, such as to edit the repeat count for an animation. For an example, see Set the loop duration.
- Implicit keyframes 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 below under Using multiple and overlapping animation timelines.
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:
- Ease In 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 between 0% (no ease) and 100% (full ease, which is half the time distance between the previous keyframe and the edited keyframe).
- Ease Out The ease out value modifies how the property values changes as time moves away from the keyframe. You can set the degree of ease by specifying a value between 0% (no ease) and 100% (full ease, which is half the time distance between the edited keyframe and the next keyframe).
- Hold Out Hold out doesn’t interpolate changes over time; rather it makes an abrupt change to the new property value when the play head reaches the keyframe where the change occurs.
- Linear 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% for the first keyframe and the Ease In value is 0% for the second keyframe.
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 button under Objects and Timeline, and then record keyframes by first moving the 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.
Two separate objects: an ellipse and a circle (created with 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 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.
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
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.
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 and then drawn into a document, just like any other control.
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:
- 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 second. You can put each animation into its own user control, but leave enough time at the beginning of the second animation for the length of time that it takes for the splash screen animation to complete.
- 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 only bind data between property values if both properties are in the same user control.
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:
- 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 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.