Jak animować nieprzezroczystość elementu lub pędzla

Aby zanikać element struktury i z niego korzystać, możesz animować jego Opacity właściwość lub animować Opacity właściwość Brush (lub pędzle) używane do malowania. Animowanie nieprzezroczystości elementu sprawia, że i jego dzieci zanikają i z widoku, ale animowanie pędzla używanego do malowania elementu pozwala być bardziej selektywne o tym, która część elementu zanika. Można na przykład animować nieprzezroczystość pędzla używanego do malowania tła przycisku. Spowodowałoby to zanikanie tła przycisku i z widoku, pozostawiając jego tekst w pełni nieprzezroczystym.

Uwaga

Animowanie OpacityBrush elementu zapewnia korzyści z wydajności w przypadku animowania Opacity właściwości elementu.

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 ponad Duration pięciu sekund. Drugi przycisk jest również animowany, ale nieprzezroczystość SolidColorBrush używany do malowania jest Background animowana, a nie nieprzezroczystość całego przycisku. Po uruchomieniu przykładu pierwszy przycisk całkowicie zanika w widoku i poza nie, podczas gdy tylko tło drugiego przycisku zanika i wychodzi 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).