How to: Accelerate or decelerate an animation
This example demonstrates how to make an animation accelerate and decelerate over time. In the following example, several rectangles are animated by animations with different AccelerationRatio and DecelerationRatio settings.
Example
<!-- This example shows how to use the AccelerationRatio and
DecelerationRatio properties of timelines
to make animations speed up or slow down as they progress. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:SampleControls="SampleControls"
WindowTitle="Acceleration and Deceleration Example">
<StackPanel Margin="20">
<Rectangle Name="nonAcceleratedOrDeceleratedRectangle" Fill="#9933FF"
Width="10" Height="20" HorizontalAlignment="Left" />
<Rectangle Name="acceleratedRectangle" Fill="#3333FF"
Width="10" Height="20" HorizontalAlignment="Left" />
<Rectangle Name="deceleratedRectangle" Fill="#33FF66"
Width="10" Height="20" HorizontalAlignment="Left" />
<Rectangle Name="acceleratedAndDeceleratedRectangle" Fill="#CCFF33"
Width="10" Height="20" HorizontalAlignment="Left" />
<!-- Create a button to start the animations. -->
<Button Margin="0,30,0,0" HorizontalAlignment="Left"
Content="Start Animations">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- Creates an animation without acceleration or deceleration for comparison. -->
<DoubleAnimation
Storyboard.TargetName="nonAcceleratedOrDeceleratedRectangle"
Storyboard.TargetProperty="(Rectangle.Width)"
Duration="0:0:10" From="20" To="400" />
<!-- Creates an animation that accelerates through 40% of its duration. -->
<DoubleAnimation
Storyboard.TargetName="acceleratedRectangle"
Storyboard.TargetProperty="(Rectangle.Width)"
AccelerationRatio="0.4" Duration="0:0:10" From="20" To="400" />
<!-- Creates an animation that decelerates through 60% of its duration. -->
<DoubleAnimation
Storyboard.TargetName="deceleratedRectangle"
Storyboard.TargetProperty="(Rectangle.Width)"
DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" />
<!-- Creates an animation that accelerates through 40% of its duration and
decelerates through the 60% of its duration. -->
<DoubleAnimation
Storyboard.TargetName="acceleratedAndDeceleratedRectangle"
Storyboard.TargetProperty="(Rectangle.Width)"
AccelerationRatio="0.4" DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
Code has been omitted from this example. For the complete code, see the Animation Timing Behavior (C#) or Animation Timing Behavior (Visual Basic).
Tee yhteistyötä kanssamme GitHubissa
Tämän sisällön lähde on GitHubissa, jossa voit myös luoda ja tarkastella ongelmia ja pull-pyyntöjä. Katso lisätietoja osallistujan oppaasta.
.NET Desktop feedback