1. 程式人生 > >WPF窗體動畫顯示和關閉

WPF窗體動畫顯示和關閉

在WindowsForm中可以利用WindowsApi函式AnimateWindow(Inptr hwd,int dwTime,int dwFlags)實現窗體的動畫顯示和淡出,但是它的樣式十分少,且效果不好,而WPF引入了動畫以後,可以自定義很炫的動畫,增強了程式的視覺效果,實現它的一般步驟為,設定窗體透明度等相關屬性,為動畫準備;設定窗體Content的變化屬性;新增動畫顯資源;繫結動畫觸發事件;具體如下。

1、設定窗體透明度等相關屬性

  <Windows:................

   Name="WDGoto"  

   WindowStyle="None"            <!-- 無邊框窗體,因為邊框不支援動畫-->

   Background="Transparent"    <!-- 背景透明,因為最後動畫顯示的是窗體的Content所以要把窗體背景設為透明,不然會影響效果-->

     AllowsTransparency="True">  <!-- 作用同上-->

2、設定窗體Content  RenderTransform變換屬性

  RenderTransform裡設定的內容即是動畫時要連續改變的量

  <Grid.RenderTransform>

    <TransformGroup>

      <ScaleTransform CenterX="100" CenterY="50"></ScaleTransform>

  <!--縮放中心為100,50。RenderTransform.Children[0]-->

        <RotateTransform CenterX="100" CenterY="50"></RotateTransform>

        <!--旋轉中心為100,50。RenderTransform.Children[1]-->

    </TransformGroup>
  </Grid.RenderTransform>

  這裡船體的Content是一個Grid,是其它的亦可

3、新增動畫資源

  動畫樣式很多,這裡只接受旋轉顯示和關閉兩種

  <Window.Resources>
  <!--原始旋轉出來樣例-->
    <Storyboard x:Key="showDW">       <!--故事板,即協同動畫-->
      <DoubleAnimation Storyboard.TargetName="grid1"   <!--故事板目標元素,這裡的窗體的Content物件Grid,如果是Canvas等其它的也可以,不過TargetName要一致-->
        Storyboard.TargetProperty="Opacity"    <!--透明度動畫-->
        From="0.2" To="1" Duration="0:0:2.5">
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="grid1"
        Storyboard.TargetProperty="RenderTransform.Children[1].Angle"   <!--角度動畫-->
        From="-90" To="0" Duration="0:0:2" >
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="grid1"
        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"   <!--X方向比例動畫,下面一致,只是變大變小不同-->
        From="0" To="1" Duration="0:0:2" 
        AccelerationRatio="1">
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="grid1"
        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"    <!--Y方向比例動畫,下面一致,只是變大變小不同-->
        From="0" To="1" Duration="0:0:2" 
        AccelerationRatio="1">
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="grid1"
        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
        To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" 
        DecelerationRatio="1">
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="grid1"
        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
        To="0.98" BeginTime="0:0:2" Duration="0:0:0.05" 
        DecelerationRatio="1">
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="grid1"
        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
        To="1" BeginTime="0:0:2.05" Duration="0:0:0.2" 
        AccelerationRatio="1">
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="grid1" 
        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="closeDW">
      <DoubleAnimation Storyboard.TargetName="grid1" 
        Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
        To="360" Duration="0:0:1.5" >
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="grid1" 
        Storyboard.TargetProperty="Opacity"
        To="0" Duration="0:0:3">
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="grid1" 
        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
        To="0" Duration="0:0:1.5" AccelerationRatio="1">
      </DoubleAnimation>
      <DoubleAnimation Storyboard.TargetName="grid1"
        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
        To="0" Duration="0:0:1.5" AccelerationRatio="1">
      </DoubleAnimation>
    </Storyboard>

</Window.Resources>

4、動畫觸發設定

  <Window.Triggers>

  <!--設定窗體的事件觸發-->

    <EventTrigger SourceName="WDGoto" RoutedEvent="Window.Loaded"><!--SourceName為觸發源,這裡與窗體名稱一致,觸發事件是Loaded事件-->
      <BeginStoryboard Name="showQueryCanvasStoryboard2" 
        Storyboard="{StaticResource showDW}">    <!--繫結顯示窗體動畫-->
      </BeginStoryboard>
    </EventTrigger>
    <EventTrigger SourceName="button1" RoutedEvent="Button.Click">  <!--這裡設定了一個Button控制元件來關閉窗體,SourceName與其一致,觸發事件是Click事件-->
      <BeginStoryboard Name="closeQueryCanvasStoryboard" 
        Storyboard="{StaticResource closeDW}">        <!--繫結關閉窗體動畫-->
      </BeginStoryboard>
    </EventTrigger>
  </Window.Triggers>

XAML完整程式碼如下

 View Code

CS完整程式碼如下

 View Code