Comment : créer un effet de texte

Mise à jour : novembre 2007

Un objet TextEffect est un objet d'assistance qui vous permet de traiter le texte comme un ou plusieurs groupes de caractères dans une chaîne de texte. L'exemple suivant issu du TextEffect, exemple affiche un caractère individuel faisant l'objet d'une rotation. Chaque caractère fait indépendamment l'objet d'une rotation à intervalles d'une seconde.

Exemple d'animation d'un effet de texte rotatif

Exemple

Dans l'exemple de code suivant, un TextEffect est défini pour un objet TextBlock. Dans ce cas, l'effet d'animation souhaité est RotateTransform qui sera appliqué à chaque caractère dans la propriété 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>

Remarque :
Si vous souhaitez faire pivoter toute la chaîne de texte comme une seule unité, appliquez RotateTransform à la propriété RenderTransform pour TextBlock. Pour plus d'informations, consultez Comment : appliquer des animations à du texte.

L'exemple de code suivant présente les animations qui sont définies pour les propriétés Angle et CenterX. La séquence d'animation est contrôlée en définissant un objet Int32AnimationUsingKeyFrames et en référençant TextEffect en définissant TargetName et TargetProperty. La propriété PositionStart évolue de 0 à 12 au cours de la séquence d'animation, correspondant à la chaîne de texte de 13 caractères.

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

Voir aussi

Tâches

TextEffect, exemple

Comment : appliquer des animations à du texte