Gewusst wie: Anwenden von Animationen auf Text

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

Beispiel

Im folgenden Beispiel wird eine DoubleAnimation verwendet, um die Breite des Textblocks zu animieren. Der Wert für die Breite ändert sich im Verlauf von 10 Sekunden von der Breite des Textblocks in 0. Anschließend werden die Werte für die Breite umgekehrt, und der Vorgang wird fortgesetzt. Dieser Typ von Animation erstellt einen Wischeffekt.

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

Im folgenden Beispiel wird eine DoubleAnimation verwendet, um die Durchlässigkeit des Textblocks zu animieren. Der Wert für die Durchlässigkeit ändert sich im Verlauf von 5 Sekunden von 1,0 in 0. Anschließend werden die Werte für die Durchlässigkeit 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, wie sich die Änderung der Durchlässigkeit des TextBlock-Steuerelements von 1.00 in 0.00 innerhalb des von Duration definierten 5-Sekunden-Intervalls auswirkt.

Änderung der Textdurchlässigkeit von 1,00 in 0,00

Im folgenden Beispiel wird eine ColorAnimation verwendet, um die Vordergrundfarbe des Textblocks zu animieren. Der Wert für die Vordergrundfarbe ändert sich im Verlauf von 5 Sekunden von einer Farbe in eine zweite Farbe. Anschließend werden die Werte für die Farbe 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>

Im folgenden Beispiel wird eine DoubleAnimation verwendet, um den Textblock zu drehen. Der Textblock führt im Verlauf von 20 Sekunden eine ganze Drehung aus. Anschließend wird die Drehung wiederholt.

<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

Konzepte

Übersicht über Animationen