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.	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: Ease In   Modifies how the property value changes as the timeline playhead approaches the keyframe. You can set the degree of easing by specifying a value ranging from 0 percent (no easing) to 100 percent (full easing, which is half the time distance between the edited keyframe and the previous keyframe). Ease Out   Modifies how the property value changes as time moves away from the keyframe. You can set the degree of easing by specifying a value ranging from 0 percent (no easing) to 100 percent (full easing, which is half the time distance between the edited keyframe and the next keyframe). 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	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. 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. 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.	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. Blend for Visual Studio 2012 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 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.

To modify the transition from a keyframe

• Do one of the following:

  1. On the timeline bar, right-click the keyframe  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.

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

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

1. On the timeline bar, right-click the keyframe  to which you want to change gradually.

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

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

To create an abrupt transition to a keyframe

• Do one of the following:

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

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

See Also

Tasks

Delete a keyframe

Make a keyframe

Paste or move a keyframe

Reuse interpolation values on other keyframes