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

Обновлен: Ноябрь 2007

Чтобы создать эффект проявления и исчезновения элемента Framework, можно анимировать его свойство 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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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. Полный пример см. в разделе Пример анимации свойства Opacity элемента.