방법: Timeline의 속도 지정

업데이트: 2007년 11월

Timeline의 SpeedRatio 속성은 해당 부모에 대해 상대적으로 진행 속도를 제어합니다. 루트 Timeline의 SpeedRatio는 기본 Timeline 속도에 대해 상대적입니다. 다음 예제에서는 서로 다른 SpeedRatio 설정을 사용하는 몇 가지 Timeline을 보여 줍니다.

예제

<!-- 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>