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