通过

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

  • 项目

若要使框架元素淡入和淡出视图，可对其 Opacity 属性进行动画处理，也可对用于绘制该元素的 Brush（或画笔）的 Opacity 属性进行动画处理。 如果对元素的不透明度进行动画处理，可让该元素及其子元素淡入和淡出视图，但若对用于绘制元素的画笔进行动画处理，将使你能够更有选择性地选择元素的哪个部分会被淡出。 例如，可对用于绘制按钮背景的画笔的不透明度进行动画处理。 这将导致按钮的背景淡入和淡出视图，同时使其文本完全不透明。

注意

对 Brush 的 Opacity 进行动画处理比对元素的 Opacity 属性进行动画处理更具性能优势。

在下面的示例中，对两个按钮进行了动画处理，这样它们就能够淡入和淡出视图。 第一个 Button 的不透明度在五秒的 Duration 时间内从 1.0 变为 0.0。 对第二个按钮也进行了动画处理，但针对用于绘制其 Background 的 SolidColorBrush 的不透明度（而不是整个按钮的不透明度）进行了动画处理。 运行示例时，第一个按钮完全淡入和淡出视图，而第二个按钮仅背景淡入和淡出视图。 第二个按钮的文本和边框保持完全不透明。

示例

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

此示例中已省略代码。 完整示例还显示了如何在 LinearGradientBrush 中对 Color 的不透明度进行动画处理。 有关完整示例，请参阅对元素示例的不透明度进行动画处理。