다음을 통해 공유

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

  • 아티클

이 예제에서는 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

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

참고 항목