Vorgehensweise: Anwenden von Animationen auf Text

Animationen können die Anzeige und Darstellung von Text in Ihrer Anwendung ändern. In den folgenden Beispielen wird mit verschiedenen Arten von Animationen die Anzeige von Text in einem TextBlock-Steuerelement beeinflusst.

Beispiel

Das folgende Beispiel verwendet eine DoubleAnimation, um die Breite des Textblocks zu animieren. Der Breitenwert ändert sich innerhalb von zehn Sekunden von der Breite des Textblocks in 0. Anschließend werden die Breitenwerte umgekehrt, und der Vorgang wird fortgesetzt. Dieser Animationstyp erstellt einen Wipe-Effekt.

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

Das folgende Beispiel verwendet eine DoubleAnimation, um die Deckkraft des Textblocks zu animieren. Der Deckkraftwert wird über einen Zeitraum von fünf Sekunden von 1,0 in 0 geändert. Anschließend werden die Deckkraftwerte umgekehrt, und der Vorgang wird fortgesetzt.

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

Das folgende Diagramm zeigt die Auswirkung des TextBlock-Steuerelements, das seine Deckkraft während des von 1.00 definierten 5-Sekunden-Intervalls von 0.00 in Duration ändert.

Das folgende Beispiel verwendet eine ColorAnimation, um die Vordergrundfarbe des Textblocks zu animieren. Der Wert für die Vordergrundfarbe ändert sich im Verlauf von fünf Sekunden von einer Farbe in eine zweite Farbe. Anschließend werden die Farbwerte umgekehrt, und der Vorgang wird fortgesetzt.

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

Das folgende Beispiel verwendet eine DoubleAnimation, um den Textblock zu drehen. Der Textblock führt eine vollständige Drehung über eine Dauer von 20 Sekunden aus und wiederholt dann die Drehung.

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

Siehe auch

• Übersicht über Animationen