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

 

展开阅读全文

没有更多推荐了,返回首页