방법: 텍스트에 애니메이션 적용

업데이트: 2007년 11월

애니메이션은 응용 프로그램에서 텍스트의 표시 및 모양을 변경할 수 있습니다. 다음 예제에서는 다양한 애니메이션 형식을 사용하여 TextBlock 컨트롤에서의 텍스트 표시 방식에 영향을 줍니다.

예제

다음 예제에서는 DoubleAnimation을 사용하여 텍스트 블록의 너비에 애니메이션 효과를 줍니다. 너비 값이 10초의 지속 시간 동안 텍스트 블록의 너비에서 0으로 변경된 다음 너비 값을 반대로 바꾸고 계속됩니다. 이 애니메이션의 형식은 닦아내기 효과를 만듭니다.

<TextBlock
  Name="MyWipedText"
  Margin="20" 
  Width="480" Height="100" FontSize="48" FontWeight="Bold" Foreground="Maroon">
  This is wiped text

  <!-- Animates the text block's width. -->
  <TextBlock.Triggers>
    <EventTrigger RoutedEvent="TextBlock.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyWipedText" 
            Storyboard.TargetProperty="(TextBlock.Width)"
            To="0.0" Duration="0:0:10" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>

다음 예제에서는 DoubleAnimation을 사용하여 텍스트 블록의 불투명도에 애니메이션 효과를 줍니다. 불투명도 값이 5초의 지속 시간 동안 1.0에서 0으로 변경된 다음 불투명도 값을 반대로 바꾸고 계속됩니다.

<TextBlock
  Name="MyFadingText"
  Margin="20" 
  Width="640" Height="100" FontSize="48" FontWeight="Bold" Foreground="Maroon">
  This is fading text

  <!-- Animates the text block's opacity. -->
  <TextBlock.Triggers>
    <EventTrigger RoutedEvent="TextBlock.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyFadingText" 
            Storyboard.TargetProperty="(TextBlock.Opacity)"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>

다음 다이어그램에서는 Duration에서 정의한 5초의 지속 시간 동안 불투명도를 1.00에서 0.00으로 변경하는 TextBlock 컨트롤의 효과를 보여 줍니다.

1.00에서 0.00으로 변경되는 텍스트 불투명도

다음 예제에서는 ColorAnimation을 사용하여 텍스트 블록의 전경색에 애니메이션 효과를 줍니다. 전경색 값이 5초의 지속 시간 동안 한 색에서 두 번째 색으로 변경된 다음 색 값을 반대로 바꾸고 계속됩니다.

<TextBlock
  Name="MyChangingColorText"
  Margin="20" 
  Width="640" Height="100" FontSize="48" FontWeight="Bold">
  This is changing color text
  <TextBlock.Foreground>
    <SolidColorBrush x:Name="MySolidColorBrush" Color="Maroon" />
  </TextBlock.Foreground>

  <!-- Animates the text block's color. -->
  <TextBlock.Triggers>
    <EventTrigger RoutedEvent="TextBlock.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation 
            Storyboard.TargetName="MySolidColorBrush"
            Storyboard.TargetProperty="Color"
            From="DarkOrange" To="SteelBlue" Duration="0:0:5"
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>

다음 예제에서는 DoubleAnimation을 사용하여 텍스트 블록을 회전합니다. 텍스트 블록은 20초의 지속 시간 동안 전체 회전을 수행한 다음 회전 반복을 계속합니다.

<TextBlock
  Name="MyRotatingText"
  Margin="20" 
  Width="640" Height="100" FontSize="48" FontWeight="Bold" Foreground="Teal" 
  >
  This is rotating text
  <TextBlock.RenderTransform>
    <RotateTransform x:Name="MyRotateTransform" Angle="0" CenterX="230" CenterY="25"/>
  </TextBlock.RenderTransform>

  <!-- Animates the text block's rotation. -->
  <TextBlock.Triggers>
    <EventTrigger RoutedEvent="TextBlock.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRotateTransform" 
            Storyboard.TargetProperty="(RotateTransform.Angle)"
            From="0.0" To="360" Duration="0:0:10" 
            RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>

참고

앞의 코드 예제를 추출한 전체 코드 샘플을 보려면 텍스트 애니메이션 샘플을 참조하십시오.

참고 항목

개념

애니메이션 개요