다음을 통해 공유

방법: 키 프레임을 사용하여 크기 변경에 애니메이션 효과 주기

  • 아티클

이 예제에서는 키 프레임을 사용하여 크기 변경에 애니메이션 효과를 주는 방법을 보여 줍니다.

예제

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

  1. 애니메이션의 처음 0.5초 동안 LinearSizeKeyFrame 클래스의 인스턴스를 사용하여 호 크기를 점진적으로 늘립니다. LinearSizeKeyFrame 같은 선형 키 프레임은 값 간의 부드러운 선형 전환을 만듭니다.

  2. 다음 0.5가 끝날 때 DiscreteSizeKeyFrame 클래스의 인스턴스를 사용하여 호 크기를 급격하게 늘립니다. DiscreteSizeKeyFrame 같은 불연속 키 프레임은 값 사이의 급격한 점프를 유발합니다. 즉 크기 변경이 미묘하지 않고 급격하게 발생합니다.

  3. 마지막 2초 동안 SplineSizeKeyFrame 클래스의 인스턴스를 사용하여 호 크기를 늘입니다. SplineSizeKeyFrame 같은 스플라인 키 프레임은 KeySpline 속성 값에 따라 값 간에 가변 전환을 만듭니다. 이 예제에서 원호의 크기는 처음에는 느리게 증가했다가 시간 세그먼트가 끝나면서 기하급수적으로 증가합니다.

<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <Canvas HorizontalAlignment="Left" Margin="0" >

      <!-- Create an arc on the screen that animates its size when it loads. -->
      <Path Stroke="Black" StrokeThickness="2" >
        <Path.Data>
          <PathGeometry>
            <PathGeometry.Figures>
              <PathFigureCollection>
                <PathFigure StartPoint="100,200">
                  <PathFigure.Segments>
                    <PathSegmentCollection>
                      <ArcSegment x:Name="myArcSegment" Size="90,80" 
                      SweepDirection="Clockwise"  Point="500,200" />
                    </PathSegmentCollection>
                  </PathFigure.Segments>
                </PathFigure>
              </PathFigureCollection>
            </PathGeometry.Figures>
          </PathGeometry>
        </Path.Data>
        <Path.Triggers>
          <EventTrigger RoutedEvent="Path.Loaded">
            <BeginStoryboard Name="myBeginStoryBoard">
              <Storyboard>
                
                <!-- Animating the Size property uses 3 KeyFrames. -->
                <SizeAnimationUsingKeyFrames
                Storyboard.TargetName="myArcSegment"
                Storyboard.TargetProperty="Size" >
                  <SizeAnimationUsingKeyFrames.KeyFrames>
                    <!-- Using a LinearSizeKeyFrame, the size of the arc increases
                         gradually over the first half second of the animation. -->
                    <LinearSizeKeyFrame KeyTime="0:0:0.5" Value="120,120" />

                    <!-- Using a DiscreteSizeKeyFrame, the size increases suddenly
                    after the first second of the animation. -->
                    <DiscreteSizeKeyFrame KeyTime="0:0:1" Value="150,150" />

                    <!-- Using a SplineSizeKeyFrame, the Size increases slowly at first 
                         and then speeds up exponentially. This KeyFrame takes 2 seconds. -->
                    <SplineSizeKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3" Value="300,300" />

                  </SizeAnimationUsingKeyFrames.KeyFrames>
                </SizeAnimationUsingKeyFrames>

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Path.Triggers>
      </Path>
    </Canvas>

</Page>

전체 샘플을 보려면 키 프레임 애니메이션 샘플을 참조하세요.

참고 항목