Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All
Expand Minimize

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.

<!-- This example shows how to use the SpeedRatio property 
     to make animations speed up or slow down. -->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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>

Community Additions

ADD
Show:
© 2015 Microsoft