방법: 키 프레임을 사용하여 개체에 애니메이션 효과 주기
업데이트: 2007년 11월
이 예제에서는 개체에 애니메이션 효과를 주는 방법을 보여 줍니다. 여기에서는 키 프레임을 사용하여 Page 컨트롤의 Background 속성에 애니메이션 효과를 줍니다.
예제
다음 예제에서는 ObjectAnimationUsingKeyFrames 클래스를 사용하여 Page 컨트롤의 Background 속성에 색 변화 애니메이션 효과를 줍니다. 예제 애니메이션은 일정한 간격으로 배경 브러시를 변경합니다. 이 애니메이션은 DiscreteObjectKeyFrame 클래스를 사용하여 세 가지 다른 키 프레임을 만듭니다. 이 애니메이션에서는 다음과 같은 방식으로 키 프레임을 사용합니다.
1초가 지난 후 LinearGradientBrush 클래스의 인스턴스에 애니메이션 효과를 적용합니다. 예제의 이 부분에서는 배경색에 선형 그라데이션을 적용하므로 색이 노란색에서 주황색에 이어 다시 빨간색으로 변합니다.
또 1초가 지난 후에는 RadialGradientBrush 클래스의 인스턴스에 애니메이션 효과를 적용합니다. 예제의 이 부분에서는 배경색에 방사형 그라데이션을 적용하므로 색이 흰색에서 파란색에 이어 다시 검은색으로 변합니다.
또 1초가 지난 후에는 DrawingBrush 클래스의 인스턴스에 애니메이션 효과를 적용합니다. 코드의 이 부분에서는 배경에 바둑판 모양의 패턴을 적용합니다.
애니메이션이 다시 시작되고 무한히 반복됩니다.
참고
DiscreteObjectKeyFrame은 ObjectAnimationUsingKeyFrames 클래스와 함께 사용할 수 있는 유일한 키 프레임 형식입니다. DiscreteObjectKeyFrame 같은 키 프레임에서는 값을 갑자기 변경하므로 이 예제의 색 변화는 갑자기 이루어집니다.
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
전체 샘플을 보려면 KeyFrame 애니메이션 샘플을 참조하십시오.