Cómo: Aplicar animaciones a texto

Actualización: noviembre 2007

Las animaciones pueden modificar la presentación y el aspecto del texto de la aplicación. En los ejemplos siguientes se utilizan tipos diferentes de animaciones para influir en la presentación del texto en un control TextBlock.

Ejemplo

En el ejemplo siguiente se utiliza un objeto DoubleAnimation para animar el ancho del bloque de texto. El valor del ancho cambia del ancho del bloque de texto a 0 a lo largo de 10 segundos y, a continuación, se invierten los valores de ancho y se continúa. Este tipo de animación crea un efecto de barrido.

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

En el ejemplo siguiente se utiliza un objeto DoubleAnimation para animar la opacidad del bloque de texto. El valor de opacidad cambia de 1,0 a 0 a lo largo de 5 segundos y, a continuación, se invierten los valores de opacidad y se continúa.

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

En el diagrama siguiente se muestra el efecto del control TextBlock al cambiar su opacidad de 1.00 a 0.00 durante el intervalo de 5 segundos definido por la propiedad Duration.

Cambio de la opacidad del texto de 1,00 a 0,00

En el ejemplo siguiente se utiliza ColorAnimation para animar el color de primer plano del bloque de texto. El valor del color de primer plano cambia de un color a un segundo color a lo largo de 5 segundos y, a continuación, se invierten los valores de color y se continúa.

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

En el ejemplo siguiente se utiliza un objeto DoubleAnimation para girar el bloque de texto. El bloque de texto realiza un giro completo a lo largo de 20 segundos y, a continuación, continúa repitiendo el giro.

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

Nota

Para ver el ejemplo de código completo del que se extrajeron los ejemplos de código anteriores, consulte Ejemplo Text Animation.

Vea también

Conceptos

Información general sobre animaciones