타이밍 동작 개요

  • 아티클

이 항목에서는 애니메이션 및 기타 Timeline 개체의 타이밍 동작에 대해 설명합니다.

필수 구성 요소

이 항목을 이해하려면 기본 애니메이션 기능을 잘 알고 있어야 입니다. 자세한 내용은 애니메이션 개요를 참조하세요.

타임라인 형식

Timeline는 시간 세그먼트를 나타냅니다. 해당 세그먼트의 길이, 시작 시기, 반복 횟수, 해당 세그먼트에서 진행되는 속도 등을 지정할 수 있는 속성이 제공됩니다.

타임라인 클래스에서 상속하는 클래스는 애니메이션 및 미디어 재생 등의 추가 기능을 제공합니다. WPF는 다음 Timeline 형식을 제공합니다.

타임라인 유형 설명
AnimationTimeline 속성에 애니메이션 효과를 적용하기 위한 출력 값을 생성하는 Timeline 개체에 대한 추상 기본 클래스입니다.
MediaTimeline 미디어 파일에서 출력을 생성합니다.
ParallelTimeline 자식 Timeline 개체를 그룹화하고 제어하는 TimelineGroup의 유형입니다.
Storyboard 포함된 타임라인에 대한 대상 지정 정보를 제공하는 ParallelTimeline의 유형입니다.
Timeline 타이밍 동작을 정의하는 추상 기본 클래스입니다.
TimelineGroup 다른 Timeline 개체를 포함할 수 있는 Timeline 개체의 추상 클래스입니다.

타임라인의 길이를 제어하는 속성

Timeline은 시간 세그먼트를 나타내고, 타임라인의 길이는 여러 다양한 방식으로 설명할 수 있습니다. 다음 표에서는 타임라인의 길이를 설명하기 위한 몇 가지 용어를 정의합니다.

용어 설명 속성
단순 지속 시간 타임라인이 단일 정방향 반복을 수행하는 데 걸리는 시간입니다. Duration
1회 반복 타임라인이 한 번 재생되는 데 걸리는 시간입니다. AutoReverse 속성이 true이면 거꾸로 1번 재생됩니다. Duration, AutoReverse
활성 기간 타임라인이 RepeatBehavior 속성으로 지정된 모든 반복을 완료하는 데 걸리는 시간입니다. Duration, AutoReverse, RepeatBehavior

Duration 속성

앞서 설명한 것처럼 타임라인은 시간 세그먼트를 나타냅니다. 해당 세그먼트의 길이는 타임라인의 Duration에 의해 결정됩니다. 타임라인이 기간 끝에 도달하면 재생을 중지합니다. 타임라인에 자식 타임라인이 있어도 재생을 중지합니다. 애니메이션의 경우 Duration으로 애니메이션이 시작 값에서 종료 값으로 전환하는 데 걸리는 시간의 길이를 지정합니다. 단일 반복의 기간과 반복을 포함해서 애니메이션이 재생되는 총 시간을 구분하기 위해 타임라인의 기간을 “단순 지속 시간”이라고 지칭하는 경우도 있습니다. 유한한 시간 값 또는 특수한 값 Automatic 또는 Forever를 사용하여 지속 시간을 지정할 수 있습니다. 애니메이션의 지속 시간은 TimeSpan 값으로 확인되므로 값 간에 전환할 수 있습니다.

다음 예제에서는 Duration이 5초로 지정된 DoubleAnimation을 보여 줍니다.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

Storyboard 및 ParallelTimeline 같은 컨테이너 타임라인은 기본 지속 시간이 Automatic이며, 이는 마지막 자식 요소가 재생을 멈추면 자동으로 종료된다는 의미입니다. 다음 예제에서는 모든 자식 DoubleAnimation 개체가 완료되는 데 걸리는 시간인 Duration가 5초로 확인되는 Storyboard를 보여줍니다.

<Storyboard >

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

컨테이너 타임라인의 Duration을 TimeSpan 값으로 설정하여 강제로 해당 자식 Timeline 개체가 재생되는 것보다 더 오래 또는 더 짧게 재생할 수 있습니다. Duration을 컨테이너 타임라인의 자식 Timeline 개체의 길이보다 더 작은 값으로 설정하면 자식 Timeline 개체는 컨테이너 타임라인이 중지될 때 재생을 중지합니다. 다음 예제에서는 이전 예제와 다르게 Storyboard의 Duration을 3초로 설정합니다. 결과적으로 첫 번째 DoubleAnimation은 대상 사각형의 너비에 60으로 애니메이션 효과가 적용되는 3초 후에 처리를 중지합니다.

<Storyboard Duration="0:0:3">

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

RepeatBehavior 속성

Timeline의 RepeatBehavior 속성은 애니메이션이 단순 지속 시간을 반복하는 횟수를 제어합니다. RepeatBehavior 속성을 사용하여 타임라인이 재생되는 횟수(반복 Count) 또는 재생해야 하는 총 시간(반복 Duration)을 지정할 수 있습니다. 두 경우 모두 애니메이션은 요청된 횟수 또는 기간을 채우는 데 필요한만큼 시작-끝 실행을 반복합니다. 기본적으로 타임라인의 반복 횟수는 1.0입니다. 이것은 1번만 재생되고 전혀 반복되지 않음을 나타냅니다.

다음 예제에서는 RepeatBehavior 속성을 사용하여 DoubleAnimation이 단순 지속 시간의 2배 동안 재생되도록 반복 횟수를 지정합니다.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

다음 예제에서는 RepeatBehavior 속성을 사용하여 DoubleAnimation이 단순 지속 시간의 절반 동안 재생되도록 지정합니다.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

Timeline의 RepeatBehavior 속성을 Forever로 설정하면 대화형으로 또는 타이밍 시스템에 의해 중지될 때까지 Timeline이 반복됩니다. 다음 예제에서는 RepeatBehavior 속성을 사용하여 DoubleAnimation이 무한정 재생되도록 지정합니다.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

추가 예제를 보려면 애니메이션 반복을 참조하세요.

AutoReverse 속성

AutoReverse 속성은 Timeline이 각 정방향 반복이 끝나면 역방향으로 재생되는지 여부를 지정합니다. 다음 예제에서는 DoubleAnimation의 AutoReverse 속성을 true로 설정합니다. 그 결과 0에서 100으로 애니메이션 효과가 적용된 후 다시 100에서 0으로 애니메이션 효과가 적용됩니다. 총 10초 동안 재생됩니다.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

Count 값을 사용하여 Timeline의 RepeatBehavior 값을 지정하고 해당 Timeline의 AutoReverse 속성이 true인 경우 단일 반복은 한 번의 정방향 반복과 한 번의 역방향 반복으로 구성됩니다. 다음 예제에서는 이전 예제와 다르게 DoubleAnimation의 RepeatBehavior에서 Count를 2로 설정합니다. 결과적으로 DoubleAnimation은 20초 동안 재생됩니다. 즉, 정뱡항으로 5초, 역방향으로 5초, 다시 정방향으로 5초, 역방향으로 5초 재생됩니다.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

컨테이너 타임라인에 자식 Timeline 개체가 있으면 컨테이너 타임라인이 역방향으로 진행될 때 마찬가지로 역방향으로 재생됩니다. 추가 예제를 보려면 타임라인을 자동으로 뒤집을지 여부 지정을 참조하세요.

BeginTime 속성

BeginTime 속성을 사용하여 타임라인이 시작되는 시기를 지정할 수 있습니다. 타임라인의 시작 시간은 부모 타임라인에 상대적입니다. 타임라인 0초는 부모 타임라인이 시작되자마자 해당 타임라인이 시작됨을 의미합니다. 다른 값을 지정하면 부모 타임라인이 재생을 시작하는 시간과 자식 타임라인이 재생되는 시간 사이에 오프셋이 생성됩니다. 예를 들어 시작 시간이 2초면 부모 타임라인이 2초에 도달할 때 해당 타임라인이 재생을 시작함을 의미합니다. 기본적으로 모든 타임라인의 시작 시간은 0초입니다. 타임라인의 시작 시간을 null로 설정하여 타임라인이 시작되지 않도록 할 수도 있습니다. WPF에서는 X:Null 태그 확장을 사용하여 null을 지정합니다.

해당 RepeatBehavior 설정 때문에 타임라인이 반복될 때마다 시작 시간이 적용되지는 않습니다. BeginTime을 10초로 지정하고 RepeatBehavior를 Forever로 지정하여 애니메이션을 만든다면 각 반복이 연속적으로 진행될 때마다가 아니라 애니메이션이 처음 재생되기 전에만 10초가 지연될 것입니다. 그러나 애니메이션의 부모 타임라인이 다시 시작되거나 반복되면 10초의 지연이 발생할 것입니다.

BeginTime 속성은 타임라인을 분산하는 데 유용합니다. 다음 예제에서는 두 개의 자식 DoubleAnimation 개체가 있는 Storyboard를 만듭니다. 첫 번째 애니메이션은 Duration이 5초이고, 두 번째 애니메이션은 Duration가 3초입니다. 예제에서는 두 번째 DoubleAnimation의 BeginTime을 5초로 설정하여 첫 번째 DoubleAnimation가 끝나면 재생이 시작되도록 합니다.

<Storyboard>

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5" 
    BeginTime="0:0:0" />


  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  
    BeginTime="0:0:5" />

</Storyboard>

FillBehavior 속성

Timeline의 총 활성 지연 시간이 끝나면 FillBehavior 속성은 중지할지 또는 마지막 값을 유지할지를 지정합니다. FillBehavior가 HoldEnd인 애니메이션은 출력 값을 "유지"합니다. 애니메이션 효과가 적용되는 속성은 애니메이션의 마지막 값을 유지합니다. Stop 값은 애니메이션이 종료된 후 대상 속성이 더 이상 영향을 미치지 않도록 합니다.

다음 예제에서는 두 개의 자식 DoubleAnimation 개체가 있는 Storyboard를 만듭니다. 두 DoubleAnimation 개체 모두 Rectangle의 Width에 0부터 100까지 애니메이션 효과를 적용합니다. Rectangle 요소에는 애니메이션 효과가 없는 Width 값 500[디바이스 독립적 픽셀]이 있습니다.

<Rectangle Name="MyRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Red">
</Rectangle>

<Rectangle Name="MyOtherRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Orange">
</Rectangle>

<Button Content="Start FillBehavior Example">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5" 
            FillBehavior="HoldEnd" />
          <DoubleAnimation 
            Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5"  
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

타임라인의 속도를 제어하는 속성

Timeline 클래스는 해당 속도를 지정하기 위한 세 가지 속성을 제공합니다.

참고 항목