방법: 애니메이션 가속 또는 감속

이 예제에서는 시간이 지남에 따라 애니메이션을 가속하고 감속하는 방법을 보여 줍니다. 다음 예제에서는 다양한 AccelerationRatio 및 DecelerationRatio 설정의 애니메이션에 의해 여러 사각형에 애니메이션 효과가 적용됩니다.

예제

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

이 예제에서는 코드를 생략합니다. 전체 코드는 애니메이션 타이밍 동작(C#) 또는 애니메이션 타이밍 동작(Visual Basic)에서 확인할 수 있습니다.