Share via


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.

To change keyframe interpolation by using the key spline editor

In Microsoft Expression Blend 2, you can use a graphical editor to modify the interpolation between keyframes. This gives you more fine control than using the Ease In, Ease Out, and Hold Out values that are described in the To change keyframe interpolation by using the pop-up menu procedure.

  1. Select the timeline from the Storyboard picker by clicking the Open a Storyboard button Cc295256.d4531c86-5048-481c-a1ca-29af202d28e7(en-us,Expression.10).png under Objects and Timeline and then selecting a storyboard.

  2. Expand the object tree to locate the keyframe that you want to modify. For example, if you want to modify the animation for a whole object, select an object-level keyframe. For information about keyframe types, see Keyframes.

  3. On the timeline bar, select one or more keyframes Cc295256.80da70bb-e635-42e8-b26d-f90453096e21(en-us,Expression.10).png. Hold the CTRL key to select multiple keyframes. Note that selecting a simple keyframe might force the selection of keyframes higher up in the object hierarchy.

  4. In the Properties panel, under Easing, a graph is displayed for the KeySpline property.

    Note

    This graph plots the values of the animated property over the time span between each set of adjacent keyframes. In other words, for each keyframe selected, the graph affects the value of the animated property as time approaches the selected keyframe. In general, the steeper the line, the faster the interpolation at that point.

    When the graph is a straight line from the bottom-left corner to the top-right corner, the transition is smooth.

    Cc295256.bc6abe2c-01fe-44b2-bd12-300f2bf12389(en-us,Expression.10).png

    You can drag either endpoint to change how quickly the property value changes after leaving the previous keyframe and going into the selected keyframe. For example, the following key spline graph would cause the animation to be very slow at the start and seem to snap into place at the end.

    Cc295256.7ec8ec80-9667-4e95-9dd6-16cf9199b83b(en-us,Expression.10).png

  5. Click the Play Cc295256.64ad8e84-1eec-4154-9d0c-11fef322c0bf(en-us,Expression.10).png button to test your animation changes.

To change keyframe interpolation by using the pop-up menu

  1. Select the timeline from the Storyboard picker by clicking the Open a Storyboard button Cc295256.d4531c86-5048-481c-a1ca-29af202d28e7(en-us,Expression.10).png under Objects and Timeline and then selecting a storyboard.

  2. Expand the object tree to locate the keyframe that you want to modify. For example, if you want to modify the animation for a whole object, select an object-level keyframe. For information about keyframe types, see Keyframes.

  3. On the timeline bar, select one or more keyframes Cc295256.80da70bb-e635-42e8-b26d-f90453096e21(en-us,Expression.10).png. Hold the CTRL key to select multiple keyframes. Note that selecting a simple keyframe might force the selection of keyframes higher up in the object hierarchy.

  4. Right-click one of your selected keyframes, and then select the interpolation option that you want. To add another interpolation effect, right-click and select again.

    • **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 ranging from 0 percent (no ease) to 100 percent (full ease, which is half the time distance between the edited keyframe and the next keyframe).

    • **Ease Out   **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 ranging 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   **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. The Hold Out effect is a toggle. Therefore, if you want to remove the effect, open the drop-down box and click Hold Out again.

    • Linear (not displayed in the drop-down list)   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.

  5. Click the Play Cc295256.64ad8e84-1eec-4154-9d0c-11fef322c0bf(en-us,Expression.10).png button to test your animation changes.

See also

Concepts

Delete a keyframe

Make a keyframe

Paste or move a keyframe

Reuse interpolation values on other keyframes