Export (0) Print
Expand All
1 out of 1 rated this helpful - Rate this topic

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.

<!-- 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" 
  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">
        <EventTrigger RoutedEvent="Button.Click">

              <!-- Creates an animation without acceleration or deceleration for comparison. -->
                Duration="0:0:10" From="20" To="400" />              

              <!-- Creates an animation that accelerates through 40% of its duration. -->
                AccelerationRatio="0.4" Duration="0:0:10" From="20" To="400" />

              <!-- Creates an animation that decelerates through 60% of its duration. -->
                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. -->
                AccelerationRatio="0.4" DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" />      

Code has been omitted from this example. For the complete code, see the Animation Timing Behavior Sample.

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
© 2014 Microsoft. All rights reserved.