How to: Specify a Timeline's Speed

A timeline's SpeedRatio property controls its rate of progress, relative to its parent. If the timeline is a root, its SpeedRatio is relative to the default timeline speed. The following example shows several timelines with different SpeedRatio settings.

Example

<!-- This example shows how to use the SpeedRatio property 
     to make animations speed up or slow down. -->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Speed Example">
  <StackPanel>

    <!-- The rectangles to animate. -->          
    <Rectangle Name="DefaultSpeedRectangle" 
      Width="20" Height="20" Fill="Blue"  />      
    <Rectangle Name="FasterRectangle" 
      Width="20" Height="20" Fill="Blue" />      
    <Rectangle Name="SlowerRectangle" 
      Width="20" Height="20" Fill="Blue" />
    <Rectangle Name="NestedTimelinesExampleRectangle" 
      Width="20" Height="20" Fill="Blue" />      
    
    <!-- Create a button to start the animations. -->
    <Button Margin="0,30,0,0" HorizontalAlignment="Left">Start Animations
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>

              <!-- This animation progresses at the same rate as its parent. -->
              <DoubleAnimation 
                Storyboard.TargetName="DefaultSpeedRectangle" 
                Storyboard.TargetProperty="Width" 
                From="20" To="400" Duration="0:0:2" 
                SpeedRatio="1" />

              <!-- This animation progresses twice as fast as its parent. -->
              <DoubleAnimation 
                Storyboard.TargetName="FasterRectangle" 
                Storyboard.TargetProperty="Width"
                From="20" To="400" Duration="0:0:2" 
                SpeedRatio="2"  />   

              <!-- This animation progresses at half the rate of its parent. -->
              <DoubleAnimation 
                Storyboard.TargetName="SlowerRectangle" 
                Storyboard.TargetProperty="Width" 
                From="20" To="400" Duration="0:0:2" 
                SpeedRatio="0.5"  />    
                

              <ParallelTimeline SpeedRatio="2">
                <ParallelTimeline SpeedRatio="2">
                
                  <!-- This animation progresses eight times faster
                       than normal, because of its SpeedRatio settings
                       and the SpeedRatio settings on its parents. -->
                  <DoubleAnimation 
                    Storyboard.TargetName="NestedTimelinesExampleRectangle" 
                    Storyboard.TargetProperty="Width" 
                    From="20" To="400" Duration="0:0:2" 
                    SpeedRatio="2"  />  
                </ParallelTimeline>
              </ParallelTimeline>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>     
    </Button>
  </StackPanel>
</Page>