Gewusst wie: Erstellen eines Texteffekts

Ein TextEffect-Objekt ist ein Hilfsobjekt, mit dem Text als eine oder mehrere Zeichengruppen in einer Textzeichenfolge behandelt werden kann. Im folgenden Beispiel wird ein einzelnes, sich drehendes Zeichen dargestellt. Jedes Zeichen wird unabhängig in Intervallen von 1 Sekunde gedreht.

Beispiel für eine sich drehende Texteffektanimation

Beispiel

Im folgenden Codebeispiel wird ein TextEffect für ein TextBlock-Objekt definiert. In diesem Fall ist der gewünschte Animationseffekt ein RotateTransform-Effekt, der auf jedes Zeichen in der Text-Eigenschaft angewendet wird.

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

Hinweis
Wenn Sie die gesamte Textzeichenfolge als einzelne Einheit drehen möchten, wenden Sie den RotateTransform-Effekt auf die RenderTransform-Eigenschaft für den TextBlock an.Weitere Informationen finden Sie unter Gewusst wie: Anwenden von Animationen auf Text.

Im folgenden Codebeispiel werden die Animationen veranschaulicht, die für die Angle-Eigenschaft und die CenterX-Eigenschaft definiert wurden. Die Animationssequenz wird dadurch gesteuert, dass ein Int32AnimationUsingKeyFrames-Objekt definiert und auf den TextEffect durch Festlegen von TargetName und TargetProperty verwiesen wird. Die PositionStart-Eigenschaft wechselt während der Animationssequenz von 0 bis 12, was der Textzeichenfolge mit 13 Zeichen entspricht.

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

Siehe auch

Aufgaben

Gewusst wie: Anwenden von Animationen auf Text