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 CodeCS完整程式碼如下
View Code