WPF窗体动画显示和关闭

最新推荐文章于 2023-03-23 11:42:48 发布

爱喝奶茶的火锅

最新推荐文章于 2023-03-23 11:42:48 发布

阅读量1.7k

点赞数

分类专栏： WPF

原文链接：https://www.cnblogs.com/onels/articles/3181571.html

版权

WPF 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

在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();
        }
    }
}

爱喝奶茶的火锅

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WPF窗体动画显示和关闭

在WindowsForm中可以利用WindowsApi函数AnimateWindow(Inptr hwd,int dwTime,int dwFlags)实现窗体的动画显示和淡出，但是它的样式十分少，且效果不好，而WPF引入了动画以后，可以自定义很炫的动画，增强了程序的视觉效果,实现它的一般步骤为，设置窗体透明度等相关属性，为动画准备；设置窗体Content的变化属性；添加动画显资源；绑定动画触发事...
复制链接

扫一扫