Applying Interpolations to Keyframes
Interpolations are used to specify how one keyframe transitions to the next keyframe of the same type. You don't need to set an interpolation for the last keyframe because there is no transition to follow. Even if the animation loops, an interpolation for the last keyframe is not used.
Several curves, or interpolation types, are available that determine the rate at which the transition occurs. For example, a constant, unchanging transition uses a Linear interpolation type; a transition that changes quickly at first and then slows down might use a Log interpolation type.
The following table summarizes the types of interpolations you can use.
| Type | Shape | Description |
| Linear | .gif "Linear interpolation") |
A constant transition. |
| Log | .gif "Log interpolation") |
A transition with a logarithmic curve. |
| Exp | .gif "Exp interpolation") |
A transition with an exponential curve. |
| Cosine | .gif "Cosine interpolation") |
A transition in a cosine curve. |
| Sine | .gif "Sine interpolation") |
A transition in a sine curve. |
| SCurve | .gif "SCurve interpolation") |
A transition in an S-curve. |
| Bezier | .gif "Bezier interpolation") |
A transition in a Bézier curve, where you specify the handles that shape the curve. |
| EaseIn | .gif "EaseIn interpolation") |
A transition that starts as a linear curve and "eases in" to a logarithmic curve, where you specify weight and time percentages. |
| EaseOut | .gif "EaseOut interpolation") |
A transition that starts as an exponential curve and "eases out" to a linear curve, where you specify weight and time percentages. |
The following example shows each of the interpolation types applied to the same animation. Each animation starts and ends at the same points at the same times, yet the transition from start to end are each different.
.gif "An example of interpolations.")
<Text Color="DarkRed" Font="Verdana,18" Content="Linear:" />
<Graphic Name="AnimStar1" Content="image://me:ImageLibrary">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-275,0,0" Interpolation="Linear" />
<PositionKeyframe Time="2.0" Value=" 275,0,0" Interpolation="Linear" />
<PositionKeyframe Time="4.0" Value="-275,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
<Text Color="Red" Font="Verdana,18" Content="EaseIn (Linear > Log) using weight 70% at time 40%:" />
<Graphic Name="AnimStar2" Content="image://me:ImageLibrary">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-275,0,0" Interpolation="EaseIn,.7,.4" />
<PositionKeyframe Time="2.0" Value=" 275,0,0" Interpolation="EaseIn,.7,.4" />
<PositionKeyframe Time="4.0" Value="-275,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
<Text Color="DarkRed" Font="Verdana,18" Content="Log:" />
<Graphic Name="AnimStar3" Content="image://me:ImageLibrary">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-275,0,0" Interpolation="Log" />
<PositionKeyframe Time="2.0" Value=" 275,0,0" Interpolation="Log" />
<PositionKeyframe Time="4.0" Value="-275,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
<Text Color="DarkGoldenrod" Font="Verdana,18" Content="Exp:" />
<Graphic Name="AnimStar4" Content="image://me:ImageLibrary">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-275,0,0" Interpolation="Exp" />
<PositionKeyframe Time="2.0" Value=" 275,0,0" Interpolation="Exp" />
<PositionKeyframe Time="4.0" Value="-275,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
<Text Color="Yellow" Font="Verdana,18" Content="EaseOut (Exp > Linear) using weight 30% at time 70%:" />
<Graphic Name="AnimStar5" Content="image://me:ImageLibrary">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-275,0,0" Interpolation="EaseOut,.7,.3" />
<PositionKeyframe Time="2.0" Value=" 275,0,0" Interpolation="EaseOut,.7,.3" />
<PositionKeyframe Time="4.0" Value="-275,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
<Text Color="DarkGoldenrod" Font="Verdana,18" Content="Linear:" />
<Graphic Name="AnimStar6" Content="image://me:ImageLibrary">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-275,0,0" Interpolation="Linear" />
<PositionKeyframe Time="2.0" Value=" 275,0,0" Interpolation="Linear" />
<PositionKeyframe Time="4.0" Value="-275,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
Interpolation types are not restricted to position—you can apply them to any of the types of keyframes. The following example shows Text elements that are animated using a Log interpolation, demonstrating how it affects transitions for all of the keyframe types.
<Text Color="Red" Content="PositionKeyframe">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-400,0,0" Interpolation="Log,2" />
<PositionKeyframe Time="2.0" Value=" 400,0,0" Interpolation="Log,2" />
<PositionKeyframe Time="4.0" Value="-400,0,0" />
</Keyframes>
</Animation>
</Animations>
</Text>
<Text Color="Blue" Content="RotateKeyframe">
<Animations>
<Animation Loop="-1">
<Keyframes>
<RotateKeyframe Time="0.0" Value="0deg;1,1,1" Interpolation="Log,2" />
<RotateKeyframe Time="2.0" Value="360deg;5,5,1" Interpolation="Log,2"/>
<RotateKeyframe Time="4.0" Value="0deg;1,1,1"/>
</Keyframes>
</Animation>
</Animations>
</Text>
<Text Color="White" Content="AlphaKeyframe">
<Animations>
<Animation Loop="-1">
<Keyframes>
<AlphaKeyframe Time="0.0" Value="1.0" Interpolation="Log,2"/>
<AlphaKeyframe Time="2.0" Value="0.2" Interpolation="Log,2"/>
<AlphaKeyframe Time="4.0" Value="1.0"/>
</Keyframes>
</Animation>
</Animations>
</Text>
<Text Color="Yellow" Content="ColorKeyframe">
<Animations>
<Animation Loop="-1">
<Keyframes>
<ColorKeyframe Time="0.0" Value="0.0,1.0,1.0" Interpolation="Log,2" />
<ColorKeyframe Time="2.0" Value="1.0,0.0,1.0" Interpolation="Log,2" />
<ColorKeyframe Time="4.0" Value="1.0,1.0,0.0"/>
</Keyframes>
</Animation>
</Animations>
</Text>
<Text Color="Green" Content="ScaleKeyframe">
<Animations>
<Animation Loop="-1">
<Keyframes>
<ScaleKeyframe Time="0.0" Value="0.5,0.5,0.5" Interpolation="Log,2"/>
<ScaleKeyframe Time="2.0" Value="2.0,2.0,2.0" Interpolation="Log,2"/>
<ScaleKeyframe Time="4.0" Value="0.5,0.5,0.5"/>
</Keyframes>
</Animation>
</Animations>
</Text>
The EaseIn and EaseOut interpolation types are a combination of two interpolation types to create a varied rate of change:
- EaseIn starts as Linear and then becomes Log.
- EaseOut starts as Exp and then becomes Linear.
In addition, you specify values for weight percentage (the strength of the interpolation type compared to Linear) and a time percentage (when the transition occurs). For example, Interpolation="EaseOut,0.7,0.3" means to use a weight of 70% for the Exp curve, and transition to Linear at 30% into the duration of the keyframe transition.
The following example shows EaseIn and EaseOut interpolations, along with the Linear, Log, and Exp interpolations they are blended from.
<Mcml xmlns="https://schemas.microsoft.com/2008/mcml">
<UI Name="EaseInOut">
<Content>
<Panel>
<Layout >
<FlowLayout Orientation="Horizontal" Spacing="0,50" ItemAlignment="Center" />
</Layout>
<Children>
<Panel>
<Layout >
<FlowLayout Orientation="Vertical" Spacing="50,0" ItemAlignment="Center" />
</Layout>
<Children>
<Text Color="DarkRed" Font="Verdana,18" Content="Linear" />
<Text Color="Red" Font="Verdana,18" Content="EaseIn (Linear > Log) using weight 70% at time 40%" />
<Text Color="DarkRed" Font="Verdana,18" Content="Log" />
<Text Color="DarkGoldenrod" Font="Verdana,18" Content="Exp" />
<Text Color="Yellow" Font="Verdana,18" Content="EaseOut (Exp > Linear) using weight 30% at time 70%" />
<Text Color="DarkGoldenrod" Font="Verdana,18" Content="Linear" />
</Children>
</Panel>
<Panel>
<Layout >
<FlowLayout Orientation="Vertical" Spacing="0,50" ItemAlignment="Center" />
</Layout>
<Children>
<Graphic Name="AnimStar1" Content="file://GreenStar.PNG">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-400,0,0" Interpolation="Linear" />
<PositionKeyframe Time="2.0" Value=" 400,0,0" Interpolation="Linear" />
<PositionKeyframe Time="4.0" Value="-400,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
<Graphic Name="AnimStar2" Content="file://GreenStar.PNG">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-400,0,0" Interpolation="EaseIn,.7,.4" />
<PositionKeyframe Time="2.0" Value=" 400,0,0" Interpolation="EaseIn,.7,.4" />
<PositionKeyframe Time="4.0" Value="-400,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
<Graphic Name="AnimStar3" Content="file://GreenStar.PNG">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-400,0,0" Interpolation="Log" />
<PositionKeyframe Time="2.0" Value=" 400,0,0" Interpolation="Log" />
<PositionKeyframe Time="4.0" Value="-400,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
<Graphic Name="AnimStar4" Content="file://GreenStar.PNG">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-400,0,0" Interpolation="Exp" />
<PositionKeyframe Time="2.0" Value=" 400,0,0" Interpolation="Exp" />
<PositionKeyframe Time="4.0" Value="-400,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
<Graphic Name="AnimStar5" Content="file://GreenStar.PNG">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-400,0,0" Interpolation="EaseOut,.7,.3" />
<PositionKeyframe Time="2.0" Value=" 400,0,0" Interpolation="EaseOut,.7,.3" />
<PositionKeyframe Time="4.0" Value="-400,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
<Graphic Name="AnimStar6" Content="file://GreenStar.PNG">
<Animations>
<Animation Loop="-1">
<Keyframes>
<PositionKeyframe Time="0.0" Value="-400,0,0" Interpolation="Linear" />
<PositionKeyframe Time="2.0" Value=" 400,0,0" Interpolation="Linear" />
<PositionKeyframe Time="4.0" Value="-400,0,0" />
</Keyframes>
</Animation>
</Animations>
</Graphic>
</Children>
</Panel>
</Children>
</Panel>
</Content>
</UI>
</Mcml>
Sample Explorer
- Animation - Interpolations > all samples
See Also