Mike Ormond's Blog

Musings on mobile development and Windows Phone 7 in particular.

Silverlight Bouncing Balls

Silverlight Bouncing Balls

  • Comments 4

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: , ,
  • I wrote a SilverLight "bouncing shapes" demo that does real 2d bouncing and not just storyboards. A demo and the code is available at http://blogs.msdn.com/jmstall/archive/2007/05/18/my-first-silverlight-1-1-app.aspx.

  • Slightly off topic but, how did you capture the animated gif? I've got some silverlight animations that I'd like to show to some people who are slightly behind the MS beta curve...

  • Mike - Thanks for the pointer. I took a look at your demo and (coincidentally) I built one very similar using JavaScript rather than managed code. The key thing about what I was / am trying to do was simulate a gravitational effect which I've not really managed to do satisfactorily either with animation using KeySplines or in code...

  • Jeff - I used Camtasia. We use it to produce our "Nugget" videos and I noticed it also had the capability to produce animated GIFs. If you want me to capture some for you I'd be happy to (if they're somewhere I can access them). Mike

Page 1 of 1 (4 items)