방법: 키 프레임을 사용하여 테두리 두께에 애니메이션 효과 주기

아티클
08/10/2011

이 예제에서는 Border의 BorderThickness 속성에 애니메이션 효과를 주는 방법을 보여 줍니다.

예제

다음 예제에서는 ThicknessAnimationUsingKeyFrames 클래스를 사용하여 Border의 BorderThickness 속성에 애니메이션 효과를 줍니다. 이 애니메이션에서는 다음과 같은 방식으로 세 가지 키 프레임을 사용합니다.

처음 0.5초 동안에는 LinearThicknessKeyFrame 클래스의 인스턴스를 사용하여 테두리 두께를 점차적으로 늘립니다. 이 예제에서는 LinearThicknessKeyFrame을 사용하여 값 간에 점차적인 선형 증가 효과를 만듭니다.
다음 0.5초가 끝날 즈음에는 DiscreteThicknessKeyFrame 클래스의 인스턴스를 사용하여 테두리 두께를 급격하게 늘립니다. DiscreteThicknessKeyFrame에서 파생된 것과 같은 불연속 키 프레임에서는 값 간에 급격한 점프 효과를 만듭니다. 즉, 애니메이션이 급격하게 움직입니다.
마지막 2초 동안 SplineThicknessKeyFrame 클래스의 인스턴스를 사용하여 테두리의 두께를 줄입니다. SplineThicknessKeyFrame에서 파생된 것과 같은 스플라인 키 프레임은 KeySpline 속성 값에 따라 값 사이의 가변 전환을 만듭니다. 이 키 프레임의 경우 애니메이션이 처음에는 서서히 시작되다가 시간 세그먼트의 끝 부분으로 갈수록 빠르게 진행됩니다.

<!-- This example shows how to use the ThicknessAnimationUsingKeyFrames to create
an animation on the BorderThickness property of a Border. -->
<Page  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.KeyFrameExamples.ThicknessAnimationUsingKeyFramesExample"
  Name="myRootElement"
  WindowTitle="ThicknessAnimationUsingKeyFrames Example">

  <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
    <Border Background="#99FFFFFF" BorderBrush="#CCCCFF" BorderThickness="1"
    Margin="0,60,0,20" Padding="20"  >
      <Border.Triggers>
        <EventTrigger RoutedEvent="Border.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animating the BorderThickness property uses 3 KeyFrames. -->
              <ThicknessAnimationUsingKeyFrames
                Storyboard.TargetProperty="BorderThickness"
                Duration="0:0:5" FillBehavior="HoldEnd" RepeatBehavior="Forever">
                <ThicknessAnimationUsingKeyFrames.KeyFrames>

                  <!-- Using a LinearThicknessKeyFrame, thickness increases gradually
                  over the first half second of the animation. -->
                  <LinearThicknessKeyFrame KeyTime="0:0:0.5">
                    <LinearThicknessKeyFrame.Value>
                      <Thickness Left="8" Right="8" Top="6" Bottom="6" />
                    </LinearThicknessKeyFrame.Value>
                  </LinearThicknessKeyFrame>

                  <!-- Using a DiscreteThicknessKeyFrame, thickness increases suddenly
                  after the first second of the animation. -->
                  <DiscreteThicknessKeyFrame KeyTime="0:0:1">
                    <DiscreteThicknessKeyFrame.Value>
                      <Thickness Left="28" Right="28" Top="24" Bottom="24" />
                    </DiscreteThicknessKeyFrame.Value>
                  </DiscreteThicknessKeyFrame>

                  <!-- Using a SplineThicknessKeyFrame, thickness decreases slowly at first
                  and then suddenly contracts. This KeyFrame takes 2 seconds. -->
                  <SplineThicknessKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3">
                    <SplineThicknessKeyFrame.Value>
                      <Thickness Left="1" Right="1" Top="1" Bottom="8" />
                    </SplineThicknessKeyFrame.Value>
                  </SplineThicknessKeyFrame>

                </ThicknessAnimationUsingKeyFrames.KeyFrames>
              </ThicknessAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Border.Triggers>

      <TextBlock>
        This example shows how to use the ThicknessAnimationUsingKeyFrames to create
        an animation on the BorderThickness property of a Border. 
      </TextBlock>
    </Border>

  </StackPanel>
</Page>

전체 샘플을 보려면 KeyFrame Animation 샘플을 참조하십시오.

참고 항목

다음을 통해 공유

방법: 키 프레임을 사용하여 테두리 두께에 애니메이션 효과 주기

예제

참고 항목

작업

참조

개념

기타 리소스

추가 리소스