12,456,128 members (53,684 online)
Add your own
alternative version

45.7K views
427 downloads
28 bookmarked
Posted

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

, 5 Aug 2008 CPOL
 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”:

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 `storyboard`s 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.

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.

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`.

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`.

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)

## About the Author

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

## You may also be interested in...

 Pro Pro

## Comments and Discussions

 First Prev Next
 Code as images... Chris Maunder23-Jul-08 17:33 Chris Maunder 23-Jul-08 17:33
 Re: Code as images... Syed Mehroz Alam6-Aug-08 1:40 Syed Mehroz Alam 6-Aug-08 1:40
 Re: Code as images... wayne.net6-Aug-08 6:26 wayne.net 6-Aug-08 6:26
 Re: Code as images... Mike Dobbles6-Aug-08 17:34 Mike Dobbles 6-Aug-08 17:34
 Re: Code as images... The Dogcow Farmer7-Aug-08 11:31 The Dogcow Farmer 7-Aug-08 11:31
 Last Visit: 31-Dec-99 18:00     Last Update: 30-Aug-16 16:20 Refresh 1

General    News    Suggestion    Question    Bug    Answer    Joke    Praise    Rant    Admin

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160826.1 | Last Updated 6 Aug 2008
Article Copyright 2008 by Mike Dobbles
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid