如何：建立項目或筆刷不透明效果的動畫

若要讓架構元素淡入和淡出檢視，您可以為其 Opacity 屬性進行動畫處理，也可以為用於繪製它的 Brush (或畫筆) 的 Opacity 屬性進行動畫處理。 對元素的不透明度進行動畫處理會使其及其子元素淡入和淡出檢視，但對用於繪製元素的畫筆進行動畫處理可讓您更有選擇性地選擇元素的哪一部分會淡出。 例如，您可以以動畫顯示用來繪製按鈕背景的筆刷不透明度。 例如，您可以為用於繪製按鈕背景的畫筆的不透明度進行動畫處理。 這將導致按鈕的背景淡入和淡出檢視，同時使其文字完全不透明。

注意

與對元素的 Opacity 屬性進行動畫處理相比，對 Brush 的 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 的不透明度進行動畫處理。 如需完整範例，請參閱對元素的不透明度進行動畫處理範例。