Click here to Skip to main content
Click here to Skip to main content
Go to top

Silverlight Tutorial: How To Animate a Ball Being Thrown and Bouncing

, 5 Aug 2008
Rate this:
Please Sign up or sign in to vote.
How to use Silverlight to create the animation of a ball being thrown and bouncing

At the end of this tutorial, you will be able to create an animation of a ball being thrown and bouncing across the ground. You can see a sample here.

Introduction

This tutorial shows you how to create an animation of a ball being thrown across the screen, landing and bouncing. Is this useful? Well, not as useful as the navigation bar article I posted earlier on The Code Project, but I found a way to use it on my website so maybe you can as well. I did have a vision of Silverlight based shopping cart where any product you selected would be thrown across the screen, land in the shopping cart, and bounce around, but I will save that for another article! In the meantime, if nothing else you can use this article to learn a little more about the internals of a Silverlight animation Storyboard.

Step by Step Tutorial

  1. Create a new project in Expression Blend.

  2. Draw an ellipse and name the ellipse “ball”:

    image001.jpg

  3. The key to creating a bounce effect is to realize that in physics the vertical motion of a ball in motion is completely independent of the horizontal motion. What we're going to do is create two separate storyboards for each of these independent motions and then we're going to go into the XAML and combine them into one storyboard.

  4. Create a new storyboard called “Bounce”.

  5. Record a keyframe at time 0 for the ball to capture the current position. Then drag the yellow timeline bar to the 1 second position.

    image002.jpg

  6. Now drag the red ball directly up. And record a key frame. At the one second point. Hit play and you should see the ball move directly up at a smooth rate and then stop.

    image003.jpg

  7. Now let’s add some gravity. Click on the second keyframe bubble of the storyboard. Set the easing as shown below. This will make the motion slow down as the ball gets to the top of its motion. Confirm this by playing the storyboard. Once you've confirmed this, close out the storyboard.

    image004.jpg

  8. Create a storyboard called Horizontal. Create a keyframe at 0 seconds, and then set the timeline to 2 seconds. Drag the ball horizontally to the right and create a keyframe at the 2 second point. Close out the storyboard.

    image005.jpg

  9. Now let’s look at the XAML for the Bounce storyboard. Unless you drag the ball perfectly vertically you'll have two sections in the storyboard, one for animating the x direction and one for animating the y direction. You can tell which is which by looking for the line that ends TranslateTransform.Y or TranslateTransform.X. Delete the section that handles the X motion.

  10. Now let’s make the ball return to its starting point.

    Here’s the XAML beforehand:

       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
    	Storyboard.TargetName="ball" 
    	Storyboard.TargetProperty=
    	"(UIElement.RenderTransform).(TransformGroup.Children)
    	[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-206">
         <SplineDoubleKeyFrame.KeySpline>
          <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
         </SplineDoubleKeyFrame.KeySpline>
        </SplineDoubleKeyFrame>
       </DoubleAnimationUsingKeyFrames>

    Notice it’s moving the ball from a position of 0 to a position of -206 in 1 second. ControlPoint1’s value of 0,1 indicates we are going to start at full speed and reach minimum speed at the end of the motion. To make the ball return back down, we'll copy the second keyframe, change time of the key to 2 seconds, change the destination of the animation to 0, and we'll reverse the sense of the easing defined by ControlPoint2. The results are as follows:

       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
    	Storyboard.TargetName="ball" 
    	Storyboard.TargetProperty=
    	"(UIElement.RenderTransform).(TransformGroup.Children)
    	[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-206">
         <SplineDoubleKeyFrame.KeySpline>
          <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
         </SplineDoubleKeyFrame.KeySpline>
        </SplineDoubleKeyFrame>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0">
         <SplineDoubleKeyFrame.KeySpline>
          <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
         </SplineDoubleKeyFrame.KeySpline>
        </SplineDoubleKeyFrame>
       </DoubleAnimationUsingKeyFrames>

    Select the bounce storyboard and hit play. You should see the ball go up and down as if it’s been thrown up and down.

  11. Now let’s add the X motion. Take a look at the second storyboard we made earlier called horizontal. Copy the DoubleAnimationUsingKeyFrames section that ends TranslateTransform.X and paste it into the Bounce storyboard. Open the bounce storyboard from the design review and hit play. You should see the ball move in a nice smooth arc as if it has been thrown.

      <Storyboard RepeatBehavior="Forever" x:Name="Bounce">
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
    	Storyboard.TargetName="ball" 
    	Storyboard.TargetProperty=
    	"(UIElement.RenderTransform).(TransformGroup.Children)
    	[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="297"/>
        <SplineDoubleKeyFrame KeyTime="00:00:03" Value="320"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
    	Storyboard.TargetName="ball" 
    	Storyboard.TargetProperty=
    	"(UIElement.RenderTransform).(TransformGroup.Children)
    	[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-206">
         <SplineDoubleKeyFrame.KeySpline>
          <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
         </SplineDoubleKeyFrame.KeySpline>
        </SplineDoubleKeyFrame>
        <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0">
         <SplineDoubleKeyFrame.KeySpline>
          <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
         </SplineDoubleKeyFrame.KeySpline>
        </SplineDoubleKeyFrame>
        <SplineDoubleKeyFrame KeyTime="00:00:02.5" Value="-20">
         <SplineDoubleKeyFrame.KeySpline>
          <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
         </SplineDoubleKeyFrame.KeySpline>
        </SplineDoubleKeyFrame>
        <SplineDoubleKeyFrame KeyTime="00:00:03" Value="0">
         <SplineDoubleKeyFrame.KeySpline>
          <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
         </SplineDoubleKeyFrame.KeySpline>
        </SplineDoubleKeyFrame>
       </DoubleAnimationUsingKeyFrames>
      </Storyboard>
  12. To add a bounce, we simply follow the same pattern and add additional key frames. To the DoubleAnimationUsingKeyFrames section that ends TranslateTransform.X, add one more keyframe at 3 seconds by adding the following XAML:

    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="320"/>

    This XAML sets the position that the ball will move to at the end of the third second to 320 which is 22 to the right of where it was at the end of the previous keyframe. For the vertical portion of the bounce copy the last two keyframes of the DoubleAnimationUsingKeyFrames section that ends TranslateTransform.Y. Set the keyframe time for the peak of the bounce to 2.5 seconds and a height of -20. Have the bounce return to 0 at 3 seconds. This results in the addition of the following XAML:

    <SplineDoubleKeyFrame KeyTime="00:00:02.5" Value="-20">
    <SplineDoubleKeyFrame.KeySpline>
    <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
    </SplineDoubleKeyFrame.KeySpline>
    </SplineDoubleKeyFrame>
    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="0">
    <SplineDoubleKeyFrame.KeySpline>
    <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
    </SplineDoubleKeyFrame.KeySpline>
  13. To make the throw occur over and over, add a RepeatBehavior to the Storyboard.

    <Storyboard RepeatBehavior="Forever" x:Name="Bounce">
  14. Finally let’s add code to start the throw on the load of the page:

    public Page() 
    { 
    // Required to initialize variables 
    InitializeComponent(); 
    Loaded += new RoutedEventHandler(PageLoaded); 
    } 
    
    void PageLoaded(object sender, RoutedEventArgs e) 
    { 
    Bounce.Begin(); 
    }
    } 
  15. That’s it. Hit F5 and you should see the ball being thrown and bouncing.

History

  • 23rd July, 2008: Initial release

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mike Dobbles
Software Developer (Senior) SilverlightWebApps.com
United States United States
Mike Dobbles is a freelance software developer specializing in Silverlight and C#. Mike has over 15 years of software development experience.

Comments and Discussions

 
GeneralCode as images... PinadminChris Maunder23-Jul-08 17:33 
GeneralRe: Code as images... PinmemberSyed Mehroz Alam6-Aug-08 1:40 
GeneralRe: Code as images... Pinmemberwayne.net6-Aug-08 6:26 
GeneralRe: Code as images... PinmemberMike Dobbles6-Aug-08 17:34 
GeneralRe: Code as images... PinmemberThe Dogcow Farmer7-Aug-08 11:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140922.1 | Last Updated 6 Aug 2008
Article Copyright 2008 by Mike Dobbles
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid