Delen via

Procedure: Animaties toepassen op tekst

Animaties kunnen de weergave en het uiterlijk van tekst in uw toepassing wijzigen. In de volgende voorbeelden worden verschillende typen animaties gebruikt om de weergave van tekst in een TextBlock besturingselement te beïnvloeden.

Voorbeeld

In het volgende voorbeeld wordt een DoubleAnimation gebruikt om de breedte van het tekstblok te animeren. De breedtewaarde verandert van de breedte van het tekstblok in 0 gedurende een periode van 10 seconden en keert vervolgens de breedtewaarden om en gaat door. Met dit type animatie wordt een wipe-effect gemaakt.

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

In het volgende voorbeeld wordt een DoubleAnimation gebruikt om de transparantie van het tekstblok te animeren. De dekkingswaarde verandert van 1,0 in 0 gedurende 5 seconden en keert vervolgens de dekkingswaarden om en gaat door.

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

In het volgende diagram ziet u het effect van het TextBlock besturingselement dat de dekking wijzigt van 1.00 naar 0.00 gedurende het door de Durationgedefinieerde tijdsinterval van 5 seconden.

tekst zal de opaciteit veranderen van 1,00 naar 0,00.

In het volgende voorbeeld wordt een ColorAnimation gebruikt om de voorgrondkleur van het tekstblok te animeren. De waarde van de voorgrondkleur verandert van één kleur in een tweede kleur gedurende een duur van 5 seconden en keert vervolgens de kleurwaarden om en gaat door.

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

In het volgende voorbeeld wordt een DoubleAnimation gebruikt om het tekstblok te draaien. Het tekstblok voert een volledige rotatie uit gedurende 20 seconden en blijft de draaiing herhalen.

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

Zie ook