Cómo: Aumentar o reducir la velocidad de una animación

Actualización: noviembre 2007

En este ejemplo se muestra cómo hacer que una animación acelere y disminuya la velocidad a lo largo del tiempo. En el ejemplo siguiente se animan varios rectángulos mediante animaciones con valores distintos de AccelerationRatio y DecelerationRatio.

Ejemplo

<!-- 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="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://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>

Se ha omitido código en este ejemplo. Para obtener el código completo, vea Ejemplo Animation Timing Behavior.