Silverlight Tutorial: How to Create an Animation of a Ball Being Thrown

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.
    
    
    

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.

History

July 23, 2008, Initial Release