방법: 키 프레임을 사용하여 크기 변경에 애니메이션 효과 주기
이 예제에서는 키 프레임을 사용하여 크기 변경에 애니메이션 효과를 주는 방법을 보여 줍니다.
예제
다음 예제에서는 SizeAnimationUsingKeyFrames 클래스를 사용하여 ArcSegment의 Size 속성에 애니메이션 효과를 줍니다. 이 애니메이션에서는 다음과 같은 방식으로 세 가지 키 프레임을 사용합니다.
애니메이션의 처음 0.5초 동안에는 LinearSizeKeyFrame 클래스의 인스턴스를 사용하여 원호의 크기를 점차적으로 늘립니다. LinearSizeKeyFrame과 같은 선형 키 프레임에서는 값 간에 완만한 선형 이동을 생성합니다.
다음 0.5초가 끝날 즈음에는 DiscreteSizeKeyFrame 클래스의 인스턴스를 사용하여 원호의 크기를 급격하게 늘립니다. DiscreteSizeKeyFrame과 같은 불연속 키 프레임에서는 값 간에 급격한 점프 효과를 만듭니다. 즉, 크기가 눈에 띌 정도로 갑자기 변합니다.
마지막 2초 동안 SplineSizeKeyFrame 클래스의 인스턴스를 사용하여 원호의 크기를 늘립니다. SplineSizeKeyFrame 같은 스플라인 키 프레임은 KeySpline 속성 값에 따라 값 사이의 가변 전환을 만듭니다. 이 예제에서는 원호의 크기가 처음에는 서서히 커지다가 시간 세그먼트의 끝 부분으로 갈수록 급격하게 커집니다.
<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
전체 샘플을 보려면 KeyFrame Animation 샘플을 참조하십시오.