欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

WPF窗体动画显示和关闭

程序员文章站 2022-03-07 13:24:54
...

在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完整代码如下

<Window x:Class="WpfArcgis.WDGotoXY"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="跳转到" Height="150" Width="463" Icon="/WpfArcgis;component/Images/L48.bmp" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None" Closing="Window_Closing" Name="WDGoto" Background="Transparent" AllowsTransparency="True">
    <Window.Resources>
        <!--原始旋转出来样例-->
        <Storyboard x:Key="showDW">
            <DoubleAnimation Storyboard.TargetName="grid1"
                        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"
                        From="0" To="1" Duration="0:0:2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        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>
        <!--转出来-->
        <Storyboard x:Key="showDW1">
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="Opacity"
                        From="0" To="1" Duration="0:0:0.2">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                        From="180" To="0" Duration="0:0:0.2" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="0.2" To="1" Duration="0:0:0.2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0.2" To="1" Duration="0:0:0.2" 
                        AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>
        <!--弹出来-->
        <Storyboard x:Key="showDW2">
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="0.2" To="0.5" Duration="0:0:0.1" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0.2" To="0.5" Duration="0:0:0.1" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                          From="0.5" To="1" Duration="0:0:0.1" BeginTime="0:0:0.2" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                         From="0.5" To="1" Duration="0:0:0.1" BeginTime="0:0:0.2">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                         From="1" To="1.2" Duration="0:0:0.1" BeginTime="0:0:0.2" AutoReverse="True" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="1"  To="1.2" Duration="0:0:0.1" BeginTime="0:0:0.2" AutoReverse="True">
            </DoubleAnimation>
        </Storyboard>
        <!--转回去-->
        <Storyboard x:Key="closeDW1">
            <DoubleAnimation Storyboard.TargetName="grid1" 
                      Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
                      To="180" Duration="0:0:0.2" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1" 
                      Storyboard.TargetProperty="Opacity"
                      To="0" Duration="0:0:0.2">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1" 
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                      To="0.2" Duration="0:0:0.2" AccelerationRatio="1">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                      Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                      To="0.2" Duration="0:0:0.2" AccelerationRatio="1">
            </DoubleAnimation>
        </Storyboard>

        <!--弹回去-->
        <Storyboard x:Key="closeDW2">
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                        From="1" To="1.2" Duration="0:0:0.04"  AutoReverse="True">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="1" To="1.2" Duration="0:0:0.04"  AutoReverse="True">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                          From="1" To="0.5" Duration="0:0:0.04" BeginTime="0:0:0.04" >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                         From="1" To="0.5" Duration="0:0:0.04" BeginTime="0:0:0.04">
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
                         From="0.5" To="0" Duration="0:0:0.04" BeginTime="0:0:0.08"  >
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grid1"
                        Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY"
                        From="0.5"  To="0" Duration="0:0:0.04" BeginTime="0:0:0.08" >
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>

    <Window.Triggers>
        <!--设置DW1的事件触发-->
        <!--注意对窗体window的name取为DW1-->
        <EventTrigger SourceName="WDGoto" RoutedEvent="Window.Loaded">
            <BeginStoryboard Name="showQueryCanvasStoryboard2" 
                      Storyboard="{StaticResource showDW1}">
            </BeginStoryboard>
        </EventTrigger>
        <!--注意对按钮的name取为button1-->
        <EventTrigger SourceName="button1" RoutedEvent="Image.MouseUp">
            <BeginStoryboard Name="closeQueryCanvasStoryboard" 
                      Storyboard="{StaticResource closeDW1}">
            </BeginStoryboard>
        </EventTrigger>
        <!--设置button1的事件触发-->
        <!--注意对按钮的name取为button1-->
    </Window.Triggers>

    <Grid Name="grid1" Background="White">
      
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="249*" />
            <ColumnDefinition Width="192*" />
        </Grid.ColumnDefinitions>
        <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>
        <Label Content="X(经度)" Height="28" HorizontalAlignment="Left" Margin="23,56,0,0" Name="label1" VerticalAlignment="Top" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="79,58,0,0" Name="tbLongitude" VerticalAlignment="Top" Width="120" />
        <Label Content="Y(纬度)" Height="28" HorizontalAlignment="Right" Margin="0,53,163,0" Name="label2" VerticalAlignment="Top" Grid.ColumnSpan="2" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="50,58,0,0" Name="tbLatitude" VerticalAlignment="Top" Width="120" Grid.Column="1" />
        <Button Content="确定" Height="23" HorizontalAlignment="Left" Margin="185,94,0,0" Name="btnSure" VerticalAlignment="Top" Width="75" Click="btnSure_Click" Grid.ColumnSpan="2" />
        <Canvas Height="30" HorizontalAlignment="Stretch" Name="canvas1" VerticalAlignment="Top" Grid.ColumnSpan="2">
            <Label Canvas.Left="6" Canvas.Top="0" Content="跳转到" Height="28" Name="label3" />
            <Image Canvas.Right="3" Canvas.Top="3" Height="24" Name="button1" Width="24" Source="/WpfArcgis;component/Images/close.ico" MouseUp="button1_MouseUp">
               
            </Image>
        </Canvas>
        <Border BorderBrush="Silver" BorderThickness="1" Name="border2"   Height="29" HorizontalAlignment="Stretch" VerticalAlignment="Top" Canvas.Top="0" Grid.ColumnSpan="2" Margin="0" />
<Border BorderBrush="Silver" BorderThickness="2" Name="border1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Canvas.Top="0" Grid.ColumnSpan="2" Margin="0" />

    </Grid>
</Window>

C#完整代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Threading;

namespace WpfArcgis
{
    /// <summary>
    /// WDGotoXY.xaml 的交互逻辑
    /// </summary>
    public partial class WDGotoXY : Window
    {

        public WDGotoXY()
        {
            InitializeComponent();
          
        }

        private void btnSure_Click(object sender, RoutedEventArgs e)
        {
        
        }

        private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
        {
         
        }


        DispatcherTimer tm = new DispatcherTimer();
        void tm_Tick(object sender, EventArgs e)
        {
            this.Visibility = Visibility.Collapsed;
            this.tm.Stop();
            this.Close();
        }

        private void button1_MouseUp(object sender, MouseButtonEventArgs e)
        {
            tm.Tick += new EventHandler(tm_Tick);
            tm.Interval = TimeSpan.FromSeconds(0.2);
            tm.Start();
        }
    }
}
相关标签: WPF