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

更新：2007 年 11 月

若要讓架構項目淡入及淡出畫面，您可以建立其 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="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 的不透明度動畫。如需完整的範例，請參閱建立項目不透明度動畫範例。