上一篇已經對關閉窗口圖標進行了動畫效果處理，本篇將對窗口界面的顯示和關閉效果進行處理。由於所有的動畫效果都是針對窗口界面的Canvas，所以先要為它添加一些RenderTranform屬性，這些屬性不要填寫任何效果，後面會由Storyboard和EventTrigger為其提供。

<Canvas Name="queryCanvas" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5">
   <!-- TransformGroup都定義在這裏 -->
 

   <Canvas.RenderTransform>
      <TransformGroup>
          <ScaleTransform></ScaleTransform>
          <RotateTransform></RotateTransform>
      </TransformGroup>
   </Canvas.RenderTransform>
   <!-- 下面是窗口界面代碼 -->
   <Border Name="queryBorder" 
 
BorderThickness="9" CornerRadius="9" 
           Width="920" Height="440" Canvas.Left="40" Canvas.Top="160">
      <ScrollViewer Name="queryScrollViewer" 
                    ScrollViewer.VerticalScrollBarVisibility="Visible">
          <
 
StackPanel Orientation="Vertical">
              <!-- 我就是那個關閉窗口圖標，你不認識我啦！ -->
              <Image Source="image/close.png" Name="closeImage" Height="20" Width="20"
                     Cursor="Hand" Margin="5" HorizontalAlignment="Right">
                  <Image.ToolTip>Close</Image.ToolTip>
              </Image>
              <Grid Name="queryGrid"></Grid>
           </StackPanel>
       </ScrollViewer>
   </Border>
</Canvas>

1. 下面就要在Window.Resources中為顯示和關閉效果添加Storyboard了，其中showQueryCanvas就是顯示效果，closeQueryCanvas是關閉效果。另，程序中涉及到的RenderTransform.Children[0]和[1]，就是上面Resources裏的ScaleTransform和RotataTransform。

<Window.Resources>
    ... ... 
    <Storyboard x:Key="showQueryCanvas">
       <DoubleAnimation Storyboard.TargetName="queryCanvas"
                        Storyboard.TargetProperty="Opacity"
                        From="0.2" To="1" Duration="0:0:2.5">
       </DoubleAnimation>
       <DoubleAnimation Storyboard.TargetName="queryCanvas"
                        Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                        From="70" To="0" Duration="0:0:2" >
       </DoubleAnimation>
       <DoubleAnimation Storyboard.TargetName="queryCanvas"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="0" To="1" Duration="0:0:2" 
                        AccelerationRatio="1">
       </DoubleAnimation>
       <DoubleAnimation Storyboard.TargetName="queryCanvas"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0" To="1" Duration="0:0:2" 
                        AccelerationRatio="1">
       </DoubleAnimation>
       <DoubleAnimation Storyboard.TargetName="queryCanvas"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" 
                        DecelerationRatio="1">
       </DoubleAnimation>
       <DoubleAnimation Storyboard.TargetName="queryCanvas"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" 
                        DecelerationRatio="1">
       </DoubleAnimation>
       <DoubleAnimation Storyboard.TargetName="queryCanvas"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        To="1" BeginTime="0:0:2.05" Duration="0:0:0.2"  
                        AccelerationRatio="1">
       </DoubleAnimation>
       <DoubleAnimation Storyboard.TargetName="queryCanvas"              
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        To="1" BeginTime="0:0:2.05" Duration="0:0:0.2" 
                        AccelerationRatio="1">
       </DoubleAnimation>
   </Storyboard>

   <Storyboard x:Key="closeQueryCanvas">
      <DoubleAnimation Storyboard.TargetName="queryCanvas" 
                       Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                       To="360" Duration="0:0:1.5" >
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="queryCanvas" 
                       Storyboard.TargetProperty="Opacity"
                       To="0" Duration="0:0:3">
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="queryCanvas" 
                       Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                       To="0" Duration="0:0:1.5" AccelerationRatio="1">
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="queryCanvas"
                       Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                       To="0" Duration="0:0:1.5" AccelerationRatio="1">
      </DoubleAnimation>
   </Storyboard>
</Window.Resources>

2. 效果Over，就要啟動事件了。關閉事件已經在上一篇寫到關閉窗口圖標事件中了，本篇只介紹顯示效果事件。顯示事件也同樣定義到Window.Triggers中。下面程序中myHome、myShop、upgradeShop、myBank為程序上方四個圖標的Name值。

<Window.Triggers>
   <!-- 關閉窗口圖標事件就寫在這裏 -->
   ... ... 
   <EventTrigger SourceName="closeImage" RoutedEvent="Image.MouseLeftButtonDown">
      <BeginStoryboard Name="closeQueryCanvasStoryboard" 
                       Storyboard="{StaticResource closeQueryCanvas}">
      </BeginStoryboard>
   </EventTrigger>

   <!-- 下面是顯示窗口事件 -->
   <EventTrigger SourceName="myHome" RoutedEvent="Image.MouseLeftButtonDown">
      <BeginStoryboard Storyboard="{StaticResource showQueryCanvas}"></BeginStoryboard>
   </EventTrigger>
   <EventTrigger SourceName="myShop" RoutedEvent="Image.MouseLeftButtonDown">
      <BeginStoryboard Storyboard="{StaticResource showQueryCanvas}"></BeginStoryboard>
   </EventTrigger>
   <EventTrigger SourceName="upgradeShop" RoutedEvent="Image.MouseLeftButtonDown">
      <BeginStoryboard Storyboard="{StaticResource showQueryCanvas}"></BeginStoryboard>
   </EventTrigger>
   <EventTrigger SourceName="myBank" RoutedEvent="Image.MouseLeftButtonDown">
      <BeginStoryboard Storyboard="{StaticResource showQueryCanvas}"></BeginStoryboard>
   </EventTrigger>
</Window.Triggers>

3. 顯示窗口效果

4. 關閉窗口效果

待續 … …

WPF編遊戲系列 之七 動畫效果（2）