Практическое руководство. Анимация свойства "Прозрачность" элемента или кисти

Чтобы элемент платформы появлялся и исчезал, можно анимировать его свойство Opacity или анимировать свойство Opacity для Brush (или кистей), используемое при его рисовании. С помощью анимации непрозрачности можно сделать так, что элемент и его дочерние элементы будут появляться и исчезать, а анимация кисти, используемой при рисовании этого элемента, позволяет выбирать, какая часть элемента будет исчезать. Например, можно анимировать непрозрачность кисти, используемой при закрашивании фона кнопки. В результате фон кнопки будет исчезать и появляться, оставляя текст полностью непрозрачным.

Примечание.

Анимация OpacityBrush обеспечивает преимущества по сравнению с анимацией свойства Opacity элемента.

В следующем примере две кнопки анимируются так, чтобы они исчезали и появлялись. Непрозрачность первой Button анимируется от 1.0 до 0.0 на Duration пяти секунд. Вторая кнопка также анимируется, но при этом анимируется Непрозрачность кисти SolidColorBrush, использованной при рисовании ее Background, а не непрозрачность всей кнопки. При запуске примера первая кнопка полностью исчезает и появляется, а в случае второй кнопки исчезает и появляется только ее фон. Ее текст и граница остаются полностью непрозрачными.

Пример

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

Код в этом примере опущен. Полный пример также показывает, как анимировать непрозрачность Color в рамках LinearGradientBrush. Полный пример см. в разделе Анимация непрозрачности примера элемента.