You can use Silverlight animations in a couple different ways to move an element around the screen. One way is to target a TranslateTransform set to the element's RenderTransform property. But programmers who are more comfortable with Canvas might want to animate the Canvas.Left and Canvas.Top attached properties. A special syntax is required to animate attached properties, but it's fairly simple.

Notice that the
Storyboard.TargetName is set to reference the Ellipse
element, and the
Storyboard.TargetProperty attributes are set to the
strings "(Canvas.Left)" and "(Canvas.Top)". When targeting attached properties
in an animation, put the fully-qualified property names in parentheses.

And now, the downside: Animations that target properties of type
Point are
not handled in the GPU
on the render thread. If that's a concern, stick to animating properties of type
double.

If you value fun more than performance, you can construct a
PathGeometry using
explicit PathFigure,
LineSegment,
ArcSegment,
BezierSegment, and
QuadraticBezierSegment objects, and every property of type
Point can be an animation target.

Three of the key-frame classes begin with the word Spline:SplineDoubleKeyFrame,SplinePointKeyFrame, and SplineColorKeyFrame. These classes have KeyTime and Value properties like the Discrete and Linear keyframes, but they also define a property named KeySpline. This property allows you to create a key frame that speeds up or slows down (or both) during its course but still ending at the correct value by the time KeyTimecomes around. The change in velocity is governed by a Bezier spline, Certainly the best way to get a feel for spline-based key frames is to experiment with them, and I have just the program. It's even called SplineKeyFrameExperiment:

You can move the control points of the spline using the blue semi-translucent
circles. The ApplicationBar has only
one button labeled "animate":

When you press it, the white ball on the bottom of the
grid moves linearly from left to right, representing the linear increase in
time. The white ball at the right of the grid moves nonlinearly from top to
bottom based on the shape of the spline.

For purposes of simplicity, the layout of the screen is
based on a grid with a fixed width and height of 400 pixels, so the program will
need to be modified a bit for a smaller screen.

Here are the two little white balls that appear on the
bottom and right, one representing time and the other representing the animated
object:

You can't see it when the program is inactive, but two
lines-one horizontal and one vertical-connect the small balls with the spline
curve. These lines track the spline curve when the small balls are moving:

The centers of these two EllipseGeometry objects provide the two control
points of the KeySpline object. In the code-behind file, the constructor
initializes the TextBlock at the
bottom with the values, normalized to the range of 0 to 1:

The storyboard is defined in the Resources collection
of the page, try it out: If you set both control points to (1, 0) you get an
animation that starts off slow and then gets very fast. Setting both control
points to (0, 1) has the opposite effect. Set the first control point to (1, 0)
and the second to (0, 1) and you get ananimation that starts off slow, then gets
fast, and ends up slow. Switch them and get the opposite effect.

The Easing Functions

You might prefer something more "canned" that gives you an overall impression of adherence to physical law without requiring a lot of thought. This is the purpose of the animation easing functions. These are classes that derive from EasingFunctionBase with common types of transitions that you can add to the beginning or end (or both beginning and end) of your animations.DoubleAnimation,PointAnimation, and ColorAnimationall have properties named EasingFunction of type EasingFunctionBase. There are also EasingDoubleKeyFrame, EasingColorKeyFrame, and EasingPointKeyFrame classes.

EasingFunctionBase defines just one property: EasingMode of the enumeration type EasingMode, either EaseOut (the default, which uses the transition only at the end of the animation), EaseIn, or EaseInOut. Eleven classes derive from EasingFunctionBase and you can derive your own if you want to have even more control and power.

The project named TheEasingLife lets you choose among the eleven
EasingFunctionBase derivatives to see their effect on a simple PointAnimation involving a ball-like object. The
content area is populated with two Polyline elements and a Path but no
coordinates are supplied; that's done in code.

Keep in mind that these EasingFunctionBase derivatives have all default
property settings, including the EasingMode property that restricts the effect
only to the end of the animation. You'll find that a couple of these
effects-specifically BackEase and ElasticEase-actually overshoot the
destination. While this doesn't matter in many cases, for some properties it
might result in illegal values.