Практическое руководство. Применение анимаций к тексту

Обновлен: Ноябрь 2007

Анимация может изменять отображение и вид текста в приложении. В следующих примерах используются различные виды анимации, влияющие на отображение текста в элементе управления TextBlock.

Пример

В следующем примере используется DoubleAnimation для анимации ширины блока текста. Значение ширины изменяет ширину блока текста на 0 на протяжении 10 секунд, а затем значение ширины возвращается. Анимация этого типа создает эффект постепенной смены изображения.

<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 используется для анимации непрозрачности блока текста. Значение непрозрачности изменяется с 1.0 до 0 на протяжении 5 секунд, а затем значение непрозрачности возвращается.

<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>

Следующая диаграмма показывает влияние TextBlock на изменение непрозрачности элемента управления с 1.00 на 0.00 в течение 5-секундного интервала, заданного свойством Duration.

Изменение непрозрачности текста с 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>

Примечание.
Полный пример кода, из которого были взяты предыдущие примеры, содержится в разделе Пример анимации текста.

См. также

Основные понятия

Общие сведения об эффектах анимации