Working with Animations

  • Article

You can use dynamic animations in MCML to create a full-fidelity experience in your Windows Media Center applications. MCML animation supports an event-driven model and provides a variety of effects so that you can integrate the animation with the rest of your layout.

At a simple level, an animation is based on a collection of keyframes, each of which is associated with a specific time and type-dependent value. For example, moving an image from one point to another, over a specific number of seconds.

You can create more complex animations by applying one or more of the following features:

  • Trigger animations in response to different types of events.
  • Use interpolation to describe how to transition from one keyframe to the next.
  • Apply transforms to create a new animation from a reference animation.

You can attach an animation to a view item by using the Animation element.

The following example shows a very simple animation that animates an image in a Graphic view item by moving it in a diamond pattern. Several position keyframes are defined, each of which specifies a time and a position; in other words, how long it takes to move the image from the position in the previous keyframe to the position in the next keyframe.

A basic animation

    <Content>
      <Graphic Name="AnimStar" Content="file://GreenStar.PNG">
        <Animations>

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

        </Animations>
      </Graphic>
    </Content>

For more information about animations, see the following topics.

Note   This section assumes a basic working knowledge of animation concepts.

Topic Description
Using Keyframes in Animation Describes the different types of keyframes you can use in animations.
Applying Interpolations to Keyframes Describes the different types of interpolations you can apply between keyframes.
Setting the Weight on Interpolations Describes how the interpolation weight affects the interpolation curve.
Playing Different Types of Animations in Response to Events Describes the types of events that trigger animations.
Applying Transforms to Animations Describes the transforms you apply to a source animation to produce a new animation.
Using Antialiasing and Transparent Borders for Animated Images Explains how to adjust images to reduce pixelated edges during animation.
Switching Between Animations Describes how to specify multiple animations and switch between them.
Best Practices for Animation Lists guidelines for creating animations.
Best Practices for Background Animations Lists guidelines for creating background animations.

Sample Explorer

  • Animation – Keyframes > all samples
  • Animation – Modifiers > all samples
  • Animation – Interpolations > all samples
  • Animation – Types > all samples
  • Animation – Transform > all samples
  • Animation – Transform By Attribute > all samples

See Also