Using Keyframes in Animation

Article
09/23/2009

In MCML, animations are an exercise in defining keyframes for a timeline. Windows Media Center fills in the gap between keyframes for smooth animation.

There are several types of keyframes you can use:

AlphaKeyframe animates an item's opacity (its alpha channel value), allowing you to make an item more opaque or more transparent over time.

The following example shows an animation transition from fully opaque to fully transparent:
```
    <AlphaKeyframe Time="0.0" Value="1.0"/>
    <AlphaKeyframe Time="2.0" Value="0.0"/>
```
ColorKeyframe animates an item's color, allowing you to change an item's color over time.

The following example shows an animation transition from red, to green, to blue:
```
    <ColorKeyframe Time="0.0" Value="0.0,1.0,1.0"/>
    <ColorKeyframe Time="2.0" Value="1.0,0.0,1.0"/>
    <ColorKeyframe Time="4.0" Value="1.0,1.0,0.0"/>
```
PositionKeyframe animates an item's position over time.

The following example shows an animation move to the right:
```
    <PositionKeyframe Time="0.0" Value="0,0,0"/>
    <PositionKeyframe Time="2.0" Value="200,0,0"/>
```
RotateKeyframe animates an item by rotating it over time.

The following example shows an animation rotating to the left:
```
    <RotateKeyframe Time="0.0" Value="0deg;0,0,1"/>
    <RotateKeyframe Time="2.0" Value="-360deg;0,0,1"/>
```
ScaleKeyframe animates an item by changing its scale over time.

The following example shows an animation doubling in size:
```
    <ScaleKeyframe Time="0.0" Value="1.0,1.0,1.0"/>
    <ScaleKeyframe Time="2.0" Value="1.5,1.5,1.5"/>
```
Note If you cannot click or select the item after playing the animation, check the Z-coordinate and make sure it is not 0. When using a Z-coordinate of 0 for the Value attribute, Windows Media Center may not recognize when the user mouses over the view item.
SizeKeyframe animates an item's size over time.

The following example shows an animation decreasing in size:
```
    <SizeKeyframe Time="0.0" Value="200,200,0"/>
    <SizeKeyframe Time="2.0" Value="100,100,0"/>
```

You can combine multiple types of keyframes to be applied as a whole animation element. Each grouping of animation keyframes can have different timelines, completely independent of each other. But note that animations require at least two keyframes of the same type (for example, two AlphaKeyFrames). With only one keyframe, there is no beginning or end and therefore nothing to animate. In addition, the first keyframe must start at Time="0".

The following example combines several types of keyframes in one animation.

<Animations>
          
  <!-- Create an animation that will loop forever -->
  <Animation Loop="-1">
            
    <Keyframes>
      <!-- Move the image in a diamond pattern. -->
      <PositionKeyframe Time="0.0" Value="-100,0,0"/>
      <PositionKeyframe Time="2.0" Value="0,-100,0"/>
      <PositionKeyframe Time="4.0" Value="100,0,0"/>
      <PositionKeyframe Time="6.0" Value="0,100,0"/>
      <PositionKeyframe Time="8.0" Value="-100,0,0"/>

      <!-- Fade the image in and out. -->
      <AlphaKeyframe Time="0.0" Value="1.0"/>
      <AlphaKeyframe Time="1.0" Value="0.2"/>
      <AlphaKeyframe Time="2.0" Value="1.0"/>

      <!-- Rotate the image. -->
      <RotateKeyframe Time="0.0" Value="0deg;1,1,1"/>
      <RotateKeyframe Time="4.0" Value="360deg;5,5,1"/>
      <RotateKeyframe Time="8.0" Value="0deg;1,1,1"/>

      <!-- Change the scale up and down. -->
      <ScaleKeyframe Time="0.0" Value="0.5,0.5,0.5"/>
      <ScaleKeyframe Time="4.0" Value="4.0,4.0,4.0"/>
      <ScaleKeyframe Time="8.0" Value="0.5,0.5,0.5"/>

    </Keyframes>
  </Animation>
</Animations>

You can also apply a granular control over the keyframe settings by using the following options:

Interpolation specifies the transition between one keyframe to the next. For more information, see Applying Interpolations to Keyframes.
RelativeTo specifies how to interpret the keyframe's value relative to other keyframes.
Weight specifies the strength of the interpolation curve with respect to a Linear interpolation. For more information, see Setting the Weight on Interpolations.

Sample Explorer

Animation –- Keyframes > all samples
Animation –- Modifiers > all samples
Animation – Types > all samples

See Also

Using Keyframes in Animation

Additional resources