Silverlight Bouncing Balls

I've been putting together a Silverlight demo "canvas" that tries to walk through various capabilities of Silverlight from drawing primitives to animations. One of the things I wanted to do was a "bouncing ball" simulation. I came across this post by Karsten Januszewski which describes the use of Bezier curves in Avalon (now WPF) to simulate bouncing balls. It was very easy to take this and "convert" it to Silverlight XAML.

The illusion isn't perfect but it's good enough for me right now. Karsten also published an Avalon application to help you figure out the right values to use for your KeySplines. Of course it doesn't work anymore as it was on an early build of WPF but I'd like to have a play and see if I can get it working again.

Ignore the "big" ball bouncing past - that was an early attempt left in there to show the animation of other properties such as Width and Fill. I've captured it as an animated GIF so you can see the effect. I just noticed the artefacts on the "big" ball - those are a result of capturing as an animated GIF. It doesn't look like that in my browser!

         <BeginStoryboard>
          <Storyboard RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames
              Storyboard.TargetName="Ellipse1"
              Storyboard.TargetProperty="(Canvas.Top)" AutoReverse="True">
              <SplineDoubleKeyFrame KeyTime="00:00:2" KeySpline="0.2,0.8 0.8,0.9" Value="300"/>
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </BeginStoryboard>
        <BeginStoryboard>
     <Ellipse x:Name="Ellipse1"
            Canvas.Left="400" Canvas.Top="400"
             Width ="50" Height="50">
      <Ellipse.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <RadialGradientBrush.GradientStops>
            <GradientStop Color="Orange" Offset="0" />
            <GradientStop Color="Red" Offset="1" />
          </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
      </Ellipse.Fill>
    </Ellipse>

Technorati tags: silverlight, animation, bezier