다음을 통해 공유

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

  • 아티클

이 예제에서는 Page 컨트롤의 Background 속성에 해당되는 개체에 키 프레임을 사용하여 애니메이션 효과를 적용하는 방법을 보여줍니다.

예제

다음 예제에서는 Page 컨트롤의 Background 속성에 대한 색 변경 내용에 애니메이션 효과를 주기 위해 ObjectAnimationUsingKeyFrames 클래스를 사용합니다. 예제 애니메이션은 정기적으로 다른 배경 브러시로 변경됩니다. 이 애니메이션은 DiscreteObjectKeyFrame 클래스를 사용하여 세 가지 키 프레임을 만듭니다. 이 애니메이션은 다음과 같은 방식으로 키 프레임을 사용합니다.

  1. 첫 번째 second의 종료 시 LinearGradientBrush 클래스의 인스턴스에 애니메이션 효과를 적용합니다. 예제의 이 섹션에서는 색이 노란색에서 주황색 및 빨간색으로 전환하도록 선형 그라데이션을 배경색에 적용합니다.

  2. 두 번째 second의 종료 시 RadialGradientBrush 클래스의 인스턴스에 애니메이션 효과를 적용합니다. 예제의 이 섹션에서는 색이 흰색에서 파란색 및 검은색으로 전환하도록 선형 그라데이션을 배경색에 적용합니다.

  3. 세 번째 second의 종료 시 DrawingBrush 클래스의 인스턴스에 애니메이션 효과를 적용합니다. 예제의 이 섹션에서는 바둑판 패턴을 배경에 적용합니다.

  4. 애니메이션이 다시 시작되고 무기한 반복됩니다.

참고

DiscreteObjectKeyFrame은 ObjectAnimationUsingKeyFrames 클래스와 함께 사용할 수 있는 유일한 키 프레임 형식입니다. DiscreteObjectKeyFrame과 같은 키 프레임은 갑작스러운 값 변경을 야기합니다. 즉, 이 예제에서 색상 변경은 갑자기 발생합니다.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Page.Triggers>
      <EventTrigger RoutedEvent="Page.Loaded">
        <BeginStoryboard>
          <Storyboard>

            <!-- ObjectAnimationUsingKeyFrames is used to animate properties that take
                 an object as a value. This animation lasts for 4 seconds using 3 KeyFrames which
                 swap different brush objects at regular intervals, making the background of the Page
                 change. -->
            <ObjectAnimationUsingKeyFrames
              Storyboard.TargetProperty="Background"
              Duration="0:0:4" RepeatBehavior="Forever">
            <ObjectAnimationUsingKeyFrames.KeyFrames>

              <!-- Note: Only discrete interpolation (DiscreteObjectKeyFrame) is available for 
              use with ObjectAnimationUsingKeyFrames which merely swaps objects according to
              a specified timeline. Other types of interpolation are too problematic to apply
              to objects.  -->
              
              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes 
                   to a LinearGradientBrush after the first second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:1">
                <DiscreteObjectKeyFrame.Value>
                  <LinearGradientBrush>
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Color="Yellow" Offset="0.0" />
                      <GradientStop Color="Orange" Offset="0.5" />
                      <GradientStop Color="Red" Offset="1.0" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>
                  
              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly changes 
                   to a RadialGradientBrush after the second second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                  <RadialGradientBrush GradientOrigin="0.75,0.25">
                    <RadialGradientBrush.GradientStops>
                      <GradientStop Color="White" Offset="0.0" />
                      <GradientStop Color="MediumBlue" Offset="0.5" />
                      <GradientStop Color="Black" Offset="1.0" />
                    </RadialGradientBrush.GradientStops>
                  </RadialGradientBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>

              <!-- Using a DiscreteObjectKeyFrame, the Page Background suddenly 
                   changes to a DrawingBrush (creates a checkerboard pattern) after the 
                   third second of the animation. -->
              <DiscreteObjectKeyFrame KeyTime="0:0:3">
                <DiscreteObjectKeyFrame.Value>
                  <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
                    <DrawingBrush.Drawing>
                      <DrawingGroup>
                        <DrawingGroup.Children>
                          <GeometryDrawing Brush="White">
                            <GeometryDrawing.Geometry>
                              <RectangleGeometry Rect="0,0,1,1" />
                            </GeometryDrawing.Geometry>
                          </GeometryDrawing>
                          <GeometryDrawing Brush="Black"
                           Geometry="M 0,0 L0,0.5 0.5,0.5 0.5,1 1,1 1,0.5 0.5,0.5 0.5,0" />
                        </DrawingGroup.Children>
                      </DrawingGroup>
                    </DrawingBrush.Drawing>
                  </DrawingBrush>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>          
            </ObjectAnimationUsingKeyFrames.KeyFrames>
          </ObjectAnimationUsingKeyFrames>        
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Page.Triggers>
</Page>

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

참고 항목