다음을 통해 공유

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

  • 아티클

Timeline은 시간 세그먼트를 나타내며 해당 세그먼트의 길이는 타임라인의 Duration에 따라 결정됩니다. Timeline이 기간 끝에 도달하면 재생을 중지합니다. Timeline에 자식 타임라인이 있어도 재생을 중지합니다. 애니메이션의 경우 Duration으로 애니메이션이 시작 값에서 종료 값으로 전환하는 데 걸리는 시간의 길이를 지정합니다.

유한한 특정 시간 또는 특별한 Automatic 또는 Forever로 Duration을 지정할 수 있습니다. 애니메이션에는 항상 유한한 길이가 정의되어 있어야 하므로 애니메이션의 기간은 항상 시간 값이어야 합니다. 그렇지 않으면 애니메이션이 대상 값 간에 전환하는 방법을 알 수 없습니다. Storyboard 및 ParallelTimeline 같은 컨테이너 타임라인(TimelineGroup 개체)에는 Automatic이라는 기본 기간이 있으며, 이는 마지막 자식 요소가 재생을 멈추면 자동으로 종료된다는 의미입니다.

다음 예제에서는 Rectangle의 너비, 높이 및 채우기 색에 애니메이션이 적용됩니다. 애니메이션 및 컨테이너 타임라인에 기간이 설정되어 애니메이션의 인식된 속도를 제어하고 컨테이너 타임라인의 기간으로 자식 타임라인의 기간을 재정의하는 등의 애니메이션 효과가 발생합니다.

예제

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

참고 항목