The WPF Animation Team created this cool red bouncing ball. Thanks Ed! When the ball hits the bottom of the canvas it flattens slightly before bouncing upwards.

The Animating XAML Clip Art posting shows you how to creating a bouncing effect (without the flattening.) In this posting, we'll explore how to create that flattening effect in a bounce, which is simply a set of animations that change the width and height of the object at the point of impact. At the bottom of this posting you can find an attached XAML file (RedBouncingBall.xaml).

A closer look at the XAML file
There are four animations defined for the bouncing ball. Two animations control the movement of the X and Y values of the ball. Two additional animations control the ScaleX and ScaleY values, which control the width and height of the ball.

The X value is animated by a type DoubleAnimation. The animation simply moves the ball along the x-axis at a constant rate:

<!-- Animation for X value -->
<DoubleAnimation Storyboard.TargetName="myTranslate"
  Storyboard.TargetProperty="X"
  To="500"
  Duration="0:0:10"
  AutoReverse="True"
  RepeatBehavior="Forever"/>

The Y value is animated by a type DoubleAnimationUsingKeyFrames, and uses SplineDoubleKeyFrame objects to create a variable rate of change in the ball's up and down motion. This results in the ball having a more realistic bounce by accelerating and decelerating the motion. For more info on SplineDoubleKeyFrame, see the Animating XAML Clip Art posting.

<!-- Animation for Y value -->
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5"
  Storyboard.TargetName="myTranslate"
  Storyboard.TargetProperty="Y"
  RepeatBehavior="Forever">
  <LinearDoubleKeyFrame Value="-250" KeyTime="0:0:0"/>
  <SplineDoubleKeyFrame Value="0" KeyTime="0:0:2.2" KeySpline="0, 0, 0.5, 0"/>
  <LinearDoubleKeyFrame Value="0" KeyTime="0:0:2.25"/>
  <SplineDoubleKeyFrame Value="-250" KeyTime="0:0:4.5" KeySpline="0, 0, 0, 0.5"/>
</DoubleAnimationUsingKeyFrames>

The ScaleX value is animated by a type DoubleAnimationUsingKeyFrames, which uses a set of four LinearDoubleKeyFrame objects. The KeyTime property of the LinearDoubleKeyFrame objects is synchronized with the preceding animation so that the change to the width of the ball occurs when the ball is at its lowest point.

Notice that the flattening effect does not start until the KeyTime value is at 2 seconds, which is just before it reaches the point of impact. In addition, the ball is restored to its original width at 2.5 seconds. This means the flattening effect occurs briefly at the lowest point of the ball's bounce. Changing the Value property to 1.3 has the effect of slightly increasing the width of the ball:

<!-- Animation for ScaleX value -->
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5"
  Storyboard.TargetName="myScale"
  Storyboard.TargetProperty="ScaleX"
  RepeatBehavior="Forever">
  <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
  <LinearDoubleKeyFrame Value="1" KeyTime="0:0:2"/>
  <LinearDoubleKeyFrame Value="1.3" KeyTime="0:0:2.25"/>
  <LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.5"/>
</DoubleAnimationUsingKeyFrames>

The ScaleY value is animated by a type DoubleAnimationUsingKeyFrames, which also uses a set of four LinearDoubleKeyFrame objects. The KeyTime property of the LinearDoubleKeyFrame objects is synchronized with the preceding animation so that the change to the height of the ball occurs when the ball is at its lowest point. Changing the Value property to 0.7 has the effect of slightly decreasing the height of the ball:

<!-- Animation for ScaleY value -->
<DoubleAnimationUsingKeyFrames Duration="0:0:4.5"
  Storyboard.TargetName="myScale"
  Storyboard.TargetProperty="ScaleY"
  RepeatBehavior="Forever">
  <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
  <LinearDoubleKeyFrame Value="1" KeyTime="0:0:2"/>
  <LinearDoubleKeyFrame Value="0.7" KeyTime="0:0:2.25"/>
  <LinearDoubleKeyFrame Value="1" KeyTime="0:0:2.5"/>
</DoubleAnimationUsingKeyFrames>

The SpeedRatio property of the Storyboard object can be used to control the speed of the timeline for all the animations defined in the Storyboard object. The default value of the SpeedRatio property is 1.0. Try running the RedBouncingBall.xaml file in XAMLPad and setting the value of the SpeedRatio property to a slower speed, such as 0.5.

<Storyboard SpeedRatio="0.5">

Now when the animations run, they all run at a relatively slower rate. In this case, the animations run at half the normal speed.

Enjoy,
Lorin


About Us
We are the Windows Presentation Foundation SDK writers and editors.