방법: 키 프레임을 사용하여 테두리 두께에 애니메이션 효과 주기
이 예제에서는 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://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>
전체 샘플을 보려면 키 프레임 애니메이션 샘플을 참조하세요.
참고 항목
.NET Desktop feedback