방법: 애니메이션의 지속 시간 설정

Timeline은 Timeline의 Duration으로 결정되는 시간 세그먼트 및 해당 세그먼트의 길이를 나타냅니다. Timeline이 해당 지속 시간의 끝에 도달하면 재생이 중지됩니다. Timeline에 자식 Timeline이 있는 경우 자식 Timeline의 재생도 중지됩니다. 애니메이션의 경우 Duration은 애니메이션이 해당 시작 값에서 끝 값까지 전환하는 데 걸리는 시간을 지정합니다.

제한된 특정 시간 값 또는 특수 값인 Automatic 또는 Forever를 사용하여 Duration을 지정할 수 있습니다. 애니메이션의 지속 시간은 항상 시간 값이어야 합니다. 이는 애니메이션에 항상 유한한 길이가 정의되어 있어야 하기 때문이며 그렇지 않은 경우에는 애니메이션이 해당 대상 값 간에 어떻게 전환되는지 알 수 없습니다. Storyboard 및 ParallelTimeline과 같은 컨테이너 Timeline(TimelineGroup 개체)의 지속 시간 기본값은 Automatic이므로, 마지막 자식의 재생이 중지되면 자동으로 종료됩니다.

다음 예제에서는 Rectangle의 너비, 높이 및 채우기 색에 애니메이션 효과를 줍니다. 애니메이션 Timeline 및 컨테이너 Timeline에 지속 시간을 설정하여 애니메이션 인식 속도를 제어하고 자식 Timeline의 지속 시간을 컨테이너 Timeline의 지속 시간으로 재정의하는 등의 애니메이션 효과를 적용합니다.

예제

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel Margin="20">

    <Rectangle Width="100" Height="100" Name="myRectangle">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Black" />
      </Rectangle.Fill>
      <Rectangle.Triggers>

        <!-- Animates the rectangle fill to yellow and width to 300. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>

            <!-- By default, TimelineGroup objects like Storyboard and ParallelTimeline have 
            a Duration of "Automatic". A TimelineGroup's automatic duration encompasses its 
            last-ending child. In this example, there is only one child of the Storyboard, the
            ParallelTimeline, so when the ParallelTimeline ends, the Storyboard duration will
            automatically end. -->
            <Storyboard>

              <!-- This ParallelTimeline has overriden its default duration of "Automatic" with
              a finite duration of half a second. This will force this Timeline to end after half a
              second even though its child Timelines have a longer duration (2 and 4 seconds respectively). 
              This cuts off the animation prematurely and the rectangle's fill will not go all the way to 
              yellow nor will the rectangle width get all the way to 300. Again, the default duration of a
              ParallelTimeline is "Automatic" so if you remove the finite duration, the ParallelTimeline
              will wait for its child timelines to end before it ends. -->

              <!-- Note: To specify a finite time in XAML, use the syntax of "days:hours:seconds". As mentioned,
              this ParallelTimeline has a duration of half a second. -->
              <ParallelTimeline Duration="0:0:0.5">

                <!-- For Animation Timelines like DoubleAnimation, the duration is one factor that
                determines the rate at which an animation appears to progress. For example, the DoubleAnimation
                below that animates the rectangle height will complete in only one second while the animation
                that animates the width willwill complete in 2 seconds which is relatively fast compared to the DoubleAnimation
                which animates the rectangle width over 4 seconds. -->
                <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Height"
                  To="300" Duration="0:0:1" />

                <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Width"
                  To="300" Duration="0:0:4" />

                <ColorAnimation
                  Storyboard.TargetName="MyAnimatedBrush"
                  Storyboard.TargetProperty="Color"
                  To="Yellow" Duration="0:0:2" />

              </ParallelTimeline>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>

      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

참고 항목

참조

Duration

개념

애니메이션 개요