如何：对元素或画笔的不透明度进行动画处理

若要使框架元素淡入和淡出视野，可以对其 Opacity 属性进行动画处理，或者对用于绘制该框架元素的 Brush（画笔）的 Opacity 属性进行动画处理。 对元素的不透明度进行动画处理，可以令该元素及其子元素淡入和淡出视野，不过，如果对用于绘制元素的画笔进行动画处理，则您可以选择使元素的哪部分淡入淡出。 例如，您可以对用于绘制按钮背景的画笔的不透明度进行动画处理。 这会导致按钮的背景淡入和淡出视野，同时使其文本完全不透明。

注意
对 Brush 的 Opacity 进行动画处理在性能上要优于对元素的 Opacity 属性进行动画处理。

在下面的示例中，将对两个按钮进行动画处理，使其淡入和淡出视野。 第一个 Button 的 Opacity 在 5 秒的 Duration 内以动画形式从 1.0 过渡到 0.0。 第二个按钮也进行了动画处理，不过是对用于绘制其 Background 的 SolidColorBrush 的 Opacity 进行动画处理，而不是对整个按钮的 Opacity 进行动画处理。 当此示例运行时，第一个按钮会整个地淡入和淡出视野，而第二个按钮只有背景部分淡入和淡出视野。 其文本和边框则保持完全不透明状态。

示例

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

此示例省略了代码。 完整的示例还演示如何对 LinearGradientBrush 内的 Color 的不透明度进行动画处理。 有关完整示例，请参见 Animating the Opacity of an Element Sample（对元素的不透明度进行动画处理示例）。