How to: Specify a Timeline's Speed
.NET Framework 3.5
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>