Как анимировать непрозрачность элемента или кисти

Для того чтобы элемент платформы появлялся и исчезал из поля зрения, можно анимировать его свойство Opacity или свойство OpacityBrush (или кисти), использованное для рисования. Анимация непрозрачности элемента позволяет ему и его дочерним элементам плавно появляться и исчезать, а изменение анимации кисти, использованной для рисования элемента, позволяет более избирательно подходить к тому, какая часть элемента будет исчезать из вида. Например, можно анимировать непрозрачность кисти, используемой для рисования фона кнопки. Это приведет к тому, что фон кнопки исчезает и выходит из представления, оставляя текст полностью непрозрачным.

Заметка

Анимирование Opacity у Brush обеспечивает преимущества производительности по сравнению с анимированием свойства 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. Полный пример см. в «Анимация непрозрачности элемента».