Поделиться через


Практическое руководство. Создание текстовых эффектов

Объект TextEffect является вспомогательным объектом, который позволяет обрабатывать текст как одну или несколько групп символов в текстовой строке. В следующем примере демонстрируется поворот отдельных символов. Поворот каждого символа осуществляется независимо от других с интервалом в 1 секунду.

Пример анимации текстового эффекта "Вращение"

Снимок экрана текстового эффекта: повернутый текст

Пример

В следующем примере кода объект TextEffect определяется для элемента управления TextBlock. В данном случае, требуемым эффектом анимации является трансформация RotateTransform, которая будет применена к каждому знаку в свойстве Text.

<TextBlock.TextEffects>
  <!-- The TextEffect to animate. -->
  <TextEffect PositionCount="1" x:Name="MyTextEffect">
    <TextEffect.Transform>
      <RotateTransform x:Name="TextEffectRotateTransform" 
        Angle="0" CenterX="10" CenterY="10" />
    </TextEffect.Transform>
  </TextEffect>
</TextBlock.TextEffects>
ПримечаниеПримечание

Если требуется повернуть все текстовые строки как единое целое, трансформация RotateTransform применяется к свойству RenderTransform для элемента TextBlock.Дополнительные сведения см. в разделе Практическое руководство. Применение анимаций к тексту.

В следующем примере показаны анимации, определенные для свойств Angle и CenterX. Последовательность анимации управляется определением объекта Int32AnimationUsingKeyFrames и ссылки на объект TextEffect через установку параметров TargetName и TargetProperty. Значение свойства PositionStart изменяется от 0 до 12 во время последовательности анимации, что соответствует 13-ти символьной текстовой строке.

  <TextBlock.Triggers>
    <EventTrigger RoutedEvent="TextBlock.Loaded">
      <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard>
          <ParallelTimeline RepeatBehavior="Forever">

            <!-- Animates the angle of the RotateTransform
                 applied to the TextEffect. -->
            <DoubleAnimation
              Storyboard.TargetName="TextEffectRotateTransform"
              Storyboard.TargetProperty="Angle" 
              From="0"
              To="360"
              Duration="00:00:0.75"                
              BeginTime="0:0:0.25" />
          </ParallelTimeline>

          <!-- Animates the horizontal center of the RotateTransform
               applied to the TextEffect. -->
          <DoubleAnimation
            From="30"
            To="370"
            Duration="00:00:13"
            RepeatBehavior="Forever"
            AutoReverse="True"
            Storyboard.TargetName="TextEffectRotateTransform"
            Storyboard.TargetProperty="CenterX" />

          <!-- Animates the position of the TextEffect. -->
          <Int32AnimationUsingKeyFrames
            Storyboard.TargetName="MyTextEffect"
            Storyboard.TargetProperty="PositionStart"
            Duration="0:0:13"
            AutoReverse="True"
            RepeatBehavior="Forever">
            <Int32AnimationUsingKeyFrames.KeyFrames>
              <DiscreteInt32KeyFrame Value="0" KeyTime="0:0:0" />
              <DiscreteInt32KeyFrame Value="1" KeyTime="0:0:1" />
              <DiscreteInt32KeyFrame Value="2" KeyTime="0:0:2" />
              <DiscreteInt32KeyFrame Value="3" KeyTime="0:0:3" />
              <DiscreteInt32KeyFrame Value="4" KeyTime="0:0:4" />
              <DiscreteInt32KeyFrame Value="5" KeyTime="0:0:5" />
              <DiscreteInt32KeyFrame Value="6" KeyTime="0:0:6" />
              <DiscreteInt32KeyFrame Value="7" KeyTime="0:0:7" />
              <DiscreteInt32KeyFrame Value="8" KeyTime="0:0:8" />
              <DiscreteInt32KeyFrame Value="9" KeyTime="0:0:9" />
              <DiscreteInt32KeyFrame Value="10" KeyTime="0:0:10" />
              <DiscreteInt32KeyFrame Value="11" KeyTime="0:0:11" />
              <DiscreteInt32KeyFrame Value="12" KeyTime="0:0:12" />
            </Int32AnimationUsingKeyFrames.KeyFrames>
          </Int32AnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>

См. также

Задачи

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