At the end of this tutorial you will be able to create an animation of a ball be thrown and bouncing across the ground a sample of which you can see 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 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 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 story boards 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 drug the ball perfectly vertically you’ll have two sections in the storyboard, one for animating the x direction and one for animation 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 it’s starting point.
Here’s the XAML before hand:
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 to 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:
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 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.
(Click to Enlarge)
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 in 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.
