Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Phone

Animations : The Bouncing Ball Problem

- Windows 10 Product Activation Keys Free 2019
- How to active Windows 8 without product key
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019
4/7/2011 3:43:55 PM
Here’s some XAML designed for a large-screen phone that moves a ball up and down:
<Grid x:Name="ContentPanel" Grid.Row="1">
<Path Fill="Red">
<Path.Data>
<EllipseGeometry RadiusX="25" RadiusY="25" />
</Path.Data>

<Path.RenderTransform>
<TranslateTransform x:Name="translate" X="240" />
</Path.RenderTransform>
</Path>

<Path Fill="{StaticResource PhoneAccentBrush}"
Data="M 100 625 L 380 625, 380 640, 100 640 Z" />

<Grid.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="translate"
Storyboard.TargetProperty="Y"
From="50" To="600" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>


There are two Path elements here. The first one is the red ball; the second is a “floor” on which the ball is supposed to bounce.

The ball has a TranslateTransform applied to it: the X property is fixed to keep the ball horizontally centered; the Y property is animated between 50 and 600 and back again. But it really doesn’t look like it’s bouncing because it has the same velocity throughout its movement. It doesn’t obey the laws of physics. In the real world, obeying the laws of physics is pretty much mandatory, but in computer graphics, often more work is involved.

Getting a better bouncing effect is possible with a DoubleAnimationUsingKeyFrames object with a SplineDoubleKeyFrame that speeds up the ball as it’s falling and slows it down as it’s rising. These use the spline control points that approximate free fall:

<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="translate"
Storyboard.TargetProperty="Y">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="50" />
<SplineDoubleKeyFrame KeyTime="0:0:1" Value="600"
KeySpline="0.25 0, 0.6 0.2" />
<SplineDoubleKeyFrame KeyTime="0:0:2" Value="50"
KeySpline="0.75 1, 0.4 0.8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>

This is much better. But it’s still not quite right, and the problem involves what happens when the ball hits the ground. The ball is at maximum velocity when it hits the ground, and then immediately it’s at maximum velocity going in the opposite direction.

In reality, this is not the way it works. When the ball hits the ground, it decelerates and compresses somewhat, and then the decompression of the ball causes it to accelerate again. Can that be simulated? Why not?

Pausing the ball momentarily as it hits the ground is an additional key frame. I decided the ball will be compressed and uncompressed over the course of a tenth second (which is probably a bit exaggerated), so I adjusted the times somewhat:

<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="translate"
Storyboard.TargetProperty="Y">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="50" />
<SplineDoubleKeyFrame KeyTime="0:0:1" Value="600"
KeySpline="0.25 0, 0.6 0.2" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1.1" Value="600" />
<SplineDoubleKeyFrame KeyTime="0:0:2.1" Value="50"
KeySpline="0.75 1, 0.4 0.8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>

The TranslateTransform starts at time zero with a value of 50. Over the next second it goes to 600 while speeding up. Over the next 10th second, it remains at 600, and then goes back up to 50 during the next second. The new animation now lasts 2.1 seconds rather than 2 seconds.

Of course, by itself, this looks even worse. But let’s add a ScaleTransform to the Path defining the ball:

<Path.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="scale" CenterY="25" />
<TranslateTransform x:Name="translate" X="240" />
</TransformGroup>
</Path.RenderTransform>

The untransformed center of the ball is the point (0, 0), and the two radii are 25 pixels, so the middle bottom of the ball is the point (0, 25). That’s the point that touches the floor, and the point that should stay in the same spot during the ScaleTransform, which is the reason for setting CenterY to 25. CenterX is 0 by default.

Here are the two additional animations for momentarily flattening out the ball:

<Storyboard RepeatBehavior="Forever">
. . .
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleX">
<DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<SplineDoubleKeyFrame KeyTime="0:0:1.05" Value="1.5"
KeySpline="0.75 1, 0.4 0.8" />
<SplineDoubleKeyFrame KeyTime="0:0:1.1" Value="1"
KeySpline="0.25 0, 0.6 0.2" />
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleY">
<DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<SplineDoubleKeyFrame KeyTime="0:0:1.05" Value="0.66"
KeySpline="0.75 1, 0.4 0.8" />
<SplineDoubleKeyFrame KeyTime="0:0:1.1" Value="1"
KeySpline="0.25 0, 0.6 0.2" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>

Between 1 second and 1.05 seconds, the ball’s width grows by 50% and its height decreases by a third. That’s reversed over the next 0.05 seconds, at which point the ball is normal and it begins its upward path.

The final version of the BouncingBall program also applies a RadialGradientBrush to the ball:

Example 1. Silverlight Project: BouncingBall File: MainPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1">
<Path>
<Path.Data>
<EllipseGeometry RadiusX="25" RadiusY="25" />
</Path.Data>

<Path.Fill>
<RadialGradientBrush GradientOrigin="0.35 0.35"
Center="0.35 0.35">
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="1" Color="Red" />
</RadialGradientBrush>
</Path.Fill>

<Path.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="scale" CenterY="25" />
<TranslateTransform x:Name="translate" X="240" />
</TransformGroup>
</Path.RenderTransform>
</Path>

<Path Fill="{StaticResource PhoneAccentBrush}"
Data="M 100 625 L 380 625, 380 640, 100 640 Z" />

<Grid.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="translate"
Storyboard.TargetProperty="Y">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="50" />
<SplineDoubleKeyFrame KeyTime="0:0:1" Value="600"
KeySpline="0.25 0, 0.6 0.2" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1.1" Value="600" />
<SplineDoubleKeyFrame KeyTime="0:0:2.1" Value="50"
KeySpline="0.75 1, 0.4 0.8" />
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleX">
<DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<SplineDoubleKeyFrame KeyTime="0:0:1.05" Value="1.5"
KeySpline="0.75 1, 0.4 0.8" />
<SplineDoubleKeyFrame KeyTime="0:0:1.1" Value="1"
KeySpline="0.25 0, 0.6 0.2" />
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleY">
<DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="1" />
<SplineDoubleKeyFrame KeyTime="0:0:1.05" Value="0.66"
KeySpline="0.75 1, 0.4 0.8" />
<SplineDoubleKeyFrame KeyTime="0:0:1.1" Value="1"
KeySpline="0.25 0, 0.6 0.2" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>


Here it is in action:



Other -----------------
- Animations : Splines and Key Frames
- Animations : Animating Attached Properties (or Not)
- Animations : Trigger on Loaded
- Animations : Key Frame Animations
- Animations : A Cautionary Tale
- Animations - XAML-Based Animations
- Animations - Some Variations
- Animations : Click and Spin
- Animations : Frame-Based vs. Time-Based
- Raster Graphics : Becoming a Photo Extras Application
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server