Share via

Change animation interpolation between keyframes (Blend for Visual Studio)

  • Article

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 ways in which you can set keyframe interpolation.

Method of keyframe interpolation

Description

Use the KeySpline graph

JJ154991.d0752aac-3556-466e-957e-cf06010c0b57(en-us,VS.110).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.

JJ154991.f5cb5969-446e-44c9-bf61-a23e8b026e6a(en-us,VS.110).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.

Select an EasingFunction

JJ154991.85f020f5-4ac1-4b75-a63d-a5c5d0ece242(en-us,VS.110).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.

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.

NoteNote
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 (Blend for Visual Studio) or Create, modify, or delete a storyboard (Blend for Visual Studio).

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, select the keyframe JJ154991.fa3c696d-5463-4000-8a6b-650fe6759bf7(en-us,VS.110).png 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 JJ154991.fa3c696d-5463-4000-8a6b-650fe6759bf7(en-us,VS.110).png 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 JJ154991.fa3c696d-5463-4000-8a6b-650fe6759bf7(en-us,VS.110).png to which you want to change gradually.

  2. Do one of the following:

    • 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 JJ154991.fa3c696d-5463-4000-8a6b-650fe6759bf7(en-us,VS.110).png 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 JJ154991.fa3c696d-5463-4000-8a6b-650fe6759bf7(en-us,VS.110).png 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 (Blend for Visual Studio)

Make a keyframe (Blend for Visual Studio)

Paste or move a keyframe (Blend for Visual Studio)

Reuse interpolation values on other keyframes (Blend for Visual Studio)