Jak animować nieprzezroczystość elementu lub pędzla

Aby element struktury pojawiał się i zanikał, możesz animować jego właściwość Opacity lub animować właściwość OpacityBrush (lub pędzli) używanych do malowania. Animowanie nieprzezroczystości elementu sprawia, że on i jego potomstwo zanikają z widoku, ale animowanie pędzla używanego do malowania elementu umożliwia bardziej precyzyjne określenie, która część elementu zanika. Można na przykład animować nieprzezroczystość pędzla używanego do malowania tła przycisku. Spowodowałoby to, że tło przycisku stopniowo pojawiałoby się i znikało, pozostawiając jego tekst całkowicie nieprzezroczystym.

W poniższym przykładzie dwa przyciski są animowane, aby zanikały i nie były wyświetlane. Nieprzezroczystość pierwszego Button jest animowana z 1.0 do 0.0 w ciągu pięciu sekund. Drugi przycisk jest również animowany, ale to przezroczystość SolidColorBrush użytego do malowania jego Background jest animowana, a nie przezroczystość całego przycisku. Po uruchomieniu przykładu pierwszy przycisk całkowicie pojawia się i znika z widoku, podczas gdy tylko tło drugiego przycisku pojawia się i znika z widoku. Jego tekst i obramowanie pozostają w pełni nieprzezroczyste.

Przykład

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

Kod został pominięty w tym przykładzie. Pełny przykład pokazuje również, jak animować nieprzezroczystość obiektu Color w obiekcie LinearGradientBrush. Pełny przykład można znaleźć w temacie Animating the Opacity of an Element Sample (Animowanie nieprzezroczystości próbki elementu).