다음을 통해 공유


방법: 활성 기간이 끝난 Timeline의 FillBehavior 지정

업데이트: 2007년 11월

이 예제에서는 애니메이션 효과가 적용된 속성의 비활성 Timeline에 대한 FillBehavior를 지정하는 방법을 보여 줍니다.

예제

TimelineFillBehavior 속성은 애니메이션 효과가 적용되지 않을 때, 즉 Timeline은 비활성 상태지만 부모 Timeline는 활성 기간 또는 보관 기간에 있을 때 애니메이션 효과가 적용된 속성의 값이 어떻게 될지 결정합니다. 예를 들어 애니메이션 효과가 적용된 속성이 애니메이션이 끝난 후 끝 값으로 유지될지, 아니면 애니메이션 시작 전의 값으로 되돌아갈지를 결정합니다.

다음 예제에서는 DoubleAnimation을 사용하여 두 사각형의 Width에 애니메이션 효과를 적용합니다. 각 사각형은 서로 다른 Timeline 개체를 사용합니다.

TimelineFillBehaviorStop으로 설정되어 Timeline이 끝날 때 사각형의 너비는 애니메이션 효과가 적용되지 않은 값으로 되돌아갑니다. 다른 TimelineFillBehaviorHoldEnd이기 때문에 Timeline이 끝날 때 너비가 끝 값으로 유지됩니다.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel Margin="20">
    <Border Background="#99FFFFFF">
      <TextBlock Margin="20">
              This example shows how the FillBehavior property determines how an animation behaves
              after it reaches the end of its duration.
      </TextBlock>
    </Border>

    <TextBlock>FillBehavior="Deactivate"</TextBlock>
    <Rectangle Name="deactiveAnimationRectangle" Width="20" Height="20" Fill="#AA3333FF" HorizontalAlignment="Left" >
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- The animated rectangle's width reverts back to its non-animated value
                   after the animation ends. -->
              <DoubleAnimation 
                Storyboard.TargetName="deactiveAnimationRectangle" 
                Storyboard.TargetProperty="Width" 
                From="100" To="400" Duration="0:0:2" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>

    <TextBlock Margin="0,20,0,0">FillBehavior="HoldEnd" </TextBlock>
    <Rectangle Name="holdEndAnimationRectangle" Width="20" Height="20" Fill="#AA3333FF" HorizontalAlignment="Left" >
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- The animated rectangle's width remains at its end value after the 
                   animation ends. -->
              <DoubleAnimation Storyboard.TargetName="holdEndAnimationRectangle" 
                Storyboard.TargetProperty="Width"  
                From="100" To="400" Duration="0:0:2" FillBehavior="HoldEnd" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

전체 샘플을 보려면 애니메이션 예제 갤러리를 참조하십시오.

참고 항목

개념

애니메이션 개요

참조

DoubleAnimation

Width

Timeline

FillBehavior

Stop

HoldEnd

기타 리소스

애니메이션 및 타이밍

애니메이션 및 타이밍 방법 항목

애니메이션 및 타이밍 샘플