Cómo: Animar la opacidad de un elemento o pincel

Para que un elemento de marco se desvanezca y vuelva a aparecer, puede animar su propiedad Opacity o bien puede animar la propiedad Opacity del Brush (o pinceles) que haya utilizado para pintarlo. Animar la opacidad del elemento hace que el elemento y sus elementos secundarios se desvanezcan y vuelvan a aparecer, pero animar el pincel que ha usado para pintar el elemento le permite ser más selectivo sobre qué parte del elemento se desvanece. Por ejemplo, podría animar la opacidad de un pincel que ha usado para pintar el fondo de un botón. Esto provocaría que el fondo del botón se desvaneciese y volviese a aparecer, a la vez que dejaría el texto totalmente opaco.

Nota:

La animación del elemento Opacity de Brush proporciona ventajas de rendimiento sobre la animación de la propiedad Opacity de un elemento.

En el ejemplo siguiente, se animan dos botones para que se desvanezcan y vuelvan a aparecer. La opacidad del primer Button se anima de 1.0 a 0.0 sobre un Duration de cinco segundos. El segundo botón también se anima, pero se anima la opacidad del elemento SolidColorBrush usado para pintar su Background en lugar de animar la opacidad de todo el botón. Cuando se ejecuta el ejemplo, el primer botón se desvanece y vuelve a aparecer completamente, mientras que en el segundo botón solo el fondo se desvanece y vuelve a aparecer. Su texto y borde permanecen totalmente opacos.

Ejemplo

<!-- OpacityAnimationExample.xaml
     This example shows how to animate the opacity of objects, 
     making them fade in and out of view. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Opacity Animation Example" Background="White">
  <StackPanel Margin="20">

    <!-- Clicking this button animates its opacity. -->
    <Button Name="opacityAnimatedButton">
      A Button
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="opacityAnimatedButton"
                Storyboard.TargetProperty="(Button.Opacity)" 
                From="1" To="0" Duration="0:0:5" AutoReverse="True"  /> 
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

    <!-- Clicking this button animates the opacity of the brush
         used to paint its background. -->
    <Button>
      A Button
      <Button.Background>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" />
      </Button.Background>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="MyAnimatedBrush"
                Storyboard.TargetProperty="(Brush.Opacity)" 
                From="1" To="0" Duration="0:0:5" AutoReverse="True"  />  
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>         
    </Button>
  </StackPanel>
</Page>

El código se ha omitido en este ejemplo. En el ejemplo completo también se muestra cómo animar la opacidad de un objeto Color dentro de LinearGradientBrush. Para ver el ejemplo completo, consulte Animación de la opacidad de un ejemplo de elemento.