방법: 키 프레임을 사용하여 문자열에 애니메이션 효과 주기
이 예제에서는 문자열에 애니메이션 효과를 주는 방법을 보여 줍니다. 여기에서는 키 프레임을 사용하여 Button 컨트롤의 Content 속성에 애니메이션 효과를 줍니다.
예제
다음 예제에서는 StringAnimationUsingKeyFrames 클래스를 사용하여 Button의 Content 속성에 애니메이션 효과를 줍니다.
키 프레임으로 만든 문자열 애니메이션은 불연속 키 프레임만 사용할 수 있으므로 이 예제의 모든 키 프레임은 DiscreteStringKeyFrame 클래스의 인스턴스를 사용합니다. DiscreteStringKeyFrame과 같은 불연속 키 프레임에서는 값 간에 급격한 점프 효과를 만듭니다. 즉, 애니메이션이 눈에 띌 정도로 갑자기 변합니다.
<!-- Demonstrates the StringAnimationUsingKeyFrames class. A StringAnimationUsingKeyFrames is used to
animate the TextContent property of a Text element. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameExamples.StringAnimationUsingKeyFramesExample"
Name="myRootElement"
WindowTitle="StringAnimationUsingKeyFrames Example">
<StackPanel HorizontalAlignment="Center">
<Button Name="myAnimatedButton" Margin="200"
FontSize="16pt" FontFamily="Verdana">Some Text
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<StringAnimationUsingKeyFrames
Storyboard.TargetName="myAnimatedButton" Storyboard.TargetProperty="(Button.Content)"
Duration="0:0:8" FillBehavior="HoldEnd">
<!-- All the key frames below are DiscreteStringKeyFrames. Discrete key frames create
sudden "jumps" between values (no interpolation). Only discrete key frames can be used
for String key frame animations. -->
<DiscreteStringKeyFrame Value="" KeyTime="0:0:0" />
<DiscreteStringKeyFrame Value="A" KeyTime="0:0:1" />
<DiscreteStringKeyFrame Value="An" KeyTime="0:0:1.5" />
<DiscreteStringKeyFrame Value="Ani" KeyTime="0:0:2" />
<DiscreteStringKeyFrame Value="Anim" KeyTime="0:0:2.5" />
<DiscreteStringKeyFrame Value="Anima" KeyTime="0:0:3" />
<DiscreteStringKeyFrame Value="Animat" KeyTime="0:0:3.5" />
<DiscreteStringKeyFrame Value="Animate" KeyTime="0:0:4" />
<DiscreteStringKeyFrame Value="Animated" KeyTime="0:0:4.5" />
<DiscreteStringKeyFrame Value="Animated " KeyTime="0:0:5" />
<DiscreteStringKeyFrame Value="Animated T" KeyTime="0:0:5.5" />
<DiscreteStringKeyFrame Value="Animated Te" KeyTime="0:0:6" />
<DiscreteStringKeyFrame Value="Animated Tex" KeyTime="0:0:6.5" />
<DiscreteStringKeyFrame Value="Animated Text" KeyTime="0:0:7" />
</StringAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
전체 샘플을 보려면 KeyFrame Animation 샘플을 참조하십시오.