Change animation interpolation between keyframes
Keyframe interpolation describes how property changes are animated in the span of time between two keyframes. Modifying the interpolation between keyframes can give you more realistic animations. For example, if you animate a ball bouncing, you can modify the interpolation between keyframes to slow down the transition as the ball rises in the air, and speeds up as it falls to the ground.
The following table describes the three ways in which you can set keyframe interpolation.
Method of keyframe interpolation |
Description |
|---|---|
Select an Ease In or Ease Out value This applies to Windows Presentation Foundation (WPF) projects only. .png "Cc295256.6194a099-fac7-4048-9abf-f3c2c25fc719(en-us,Expression.30).png") |
You can change the interpolation that occurs when going to and from a keyframe by using the drop-down menu that appears when you right-click the keyframe. The drop-down menu includes the following interpolation options:
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. Linear interpolation changes the property value in equal increments between the keyframes. |
Use the KeySpline graph .png "Cc295256.d0752aac-3556-466e-957e-cf06010c0b57(en-us,Expression.30).png") |
You can change the interpolation as the timeline playhead approaches a keyframe by using the KeySpline graph. This graph plots the values of the animated property over the time span between the selected keyframe and the previous keyframe. In general, the steeper the line, the faster the change in value at that point. When the graph is a straight line from the lower-left corner to the upper-right corner, the interpolation is linear. .png "Cc295256.f5cb5969-446e-44c9-bf61-a23e8b026e6a(en-us,Expression.30).png")
You can drag either yellow control point to change how quickly the property value changes after leaving the previous keyframe and going into the selected keyframe. .gif "Note") Note:
The KeySpline graph and the Ease In and Ease Out values are synchronized. Modifying the Ease In value will affect the upper-right control point of the KeySpline graph of the selected keyframe. Modifying the Ease Out value will affect the lower-left control point of the KeySpline graph of the keyframe that follows the selected keyframe.
|
Select an EasingFunction This applies to Microsoft Silverlight projects only. .png "Cc295256.85f020f5-4ac1-4b75-a63d-a5c5d0ece242(en-us,Expression.30).png") |
You can change the interpolation as the timeline playhead approaches a keyframe by using the EasingFunction drop-down menu that appears in the Properties panel when you select the keyframe. Microsoft Expression Blend comes with several preset easing functions that you can choose from. Similarly to the KeySpline graph, the easing function is applied to the interpolation that occurs as the timeline playhead approaches the selected keyframe. Use the images on the buttons under the In, Out, and InOut columns to decide which easing function to use. The buttons under the In column will apply the chosen affect to the beginning of the KeySpine, the buttons under the Out column will apply the chosen affect to the end of the KeySpline, and the buttons under InOut will apply the affect to both. Choose the button that represents the way you want the KeySpline graph to look. Custom easing functions can be programmed by using the Silverlight SDK. For more information, see EasingFunctionBase Class (System.Windows.Media.Animation) on MSDN. For information about the Silverlight SDK, click Start, click All Programs, click Microsoft Silverlight 3 SDK, and then click Welcome. Note:
Selecting an EasingFunction removes any previous interpolation effect that was applied to the keyframe.
|
Alternatively, you can make a transition between keyframes occur instantaneously instead of occurring over time by using the Hold In interpolation option.
Note
The following procedures assume that you have opened a storyboard that contains keyframes.
For more information, see Open or close a storyboard or Create, modify, or delete a storyboard.
Tip
The following procedures can be used when a single keyframe is selected, or when multiple keyframes are selected by holding down the CTRL key.
To modify the transition from a keyframe
Do one of the following:
On the timeline bar, right-click the keyframe
.png "Cc295256.fa3c696d-5463-4000-8a6b-650fe6759bf7(en-us,Expression.30).png")
from which you want to effect a gradual transition, point to Ease Out on the drop-down menu that appears, and then select a value from the list.On the timeline bar, select the keyframe
that follows the one from which you want to effect a gradual transition, and then, under Easing in the Properties panel, click KeySpline. Drag the yellow control point in the lower-left corner of the KeySpline graph.On the timeline bar, select the keyframe
that follows the one from which you want to effect a gradual transition, and then, under Easing in the Properties panel, click EasingFunction. Click the drop-down arrow next to None, and then select one of the buttons next to an easing function.
To modify the transition to a keyframe
On the timeline bar, right-click the keyframe
to which you want to change gradually.Do one of the following:
Point to Ease In from the drop-down menu that appears, and then select a value from the list.
Under Easing in the Properties panel, click KeySpline. Drag the yellow control point in the upper-right corner of the KeySpline graph.
Under Easing in the Properties panel, click EasingFunction. Click the drop-down arrow next to None, and then select one of the buttons next to an easing function.
To create an abrupt transition to a keyframe
You can make a transition between keyframes occur instantaneously instead of occurring over time. The Hold In interpolation option creates an abrupt change to a new property value when the playhead reaches the keyframe where the new property value is recorded.
Do one of the following:
On the timeline bar, select the keyframe
to which you want to change abruptly, and then, under Easing in the Properties panel, click Hold In.On the timeline bar, right-click the keyframe
to which you want to change abruptly, and then click Hold In on the drop-down menu that appears. A check mark appears next to Hold In on the drop-down menu.Note
Selecting Hold In removes any previous interpolation effect that was applied to the keyframe, and any previous outbound interpolation effect that was applied to the preceding keyframe on the timeline bar. The inbound interpolation effect that is applied to the subsequent keyframe on the timeline bar remains unaffected.