WPF——动画

本文目录

　　前言

　　1、线性插值动画

　　2、关键帧动画

　　3、路径动画

前言

　　使用动画，是增强用户体验的一种有效的手段。合理的动画，可以让应用程序的界面看起来更加自然、真实、流畅、舒适，更有效地向用户展现信息，用户也更容易接受。同时也增加了软件使用的乐趣，提高用户粘度。（如MSN2011的启动界面动画，字体滑动和淡入淡出。）

　　在以往的程序开发中，如果想构建动画，需要定时器和自定义的绘图元素，并让这些绘图元素根据定时器做出相应的改变，以实现动画效果，开发难度和工作量都是很高的。并且这些动画的拓展性和灵活性一般很弱，代码量和复杂度却很大。而在WPF中，可以使用声明的方式构建动画，甚至不需要任何后台代码，就可以实现动画效果。WPF提供的动画模型和强大的类库，让一般动画的实现，都变得轻而易举。在WPF中，创建更加复杂的动画，甚至也可以使用设计工具或第三方工具在XAML中实现。所以，需要的更多的，可能不是代码量，而是你的想象力！

　　本文将介绍WPF 中三种基本动画，线性插值、关键帧和路径动画。

　　在 System.Windows.Media.Animation 这个命名空间中，包含了三种动画类：线性插值动画类（17个）、关键帧动画（22个）、路径动画（3个）。

　　在C#代码中使用Animation类，需要引入命名空间：System.Windows.Media.Animation

　　using System.Windows.Media.Animation;

1、线性插值动画

　　该动画表现为，元素的某个属性，在开始值和结束值之间逐步增加，是一种线性插值的过程。比如，实现一个按钮的淡入效果，让它的透明度Opacity在0~1之间线性增长，就可以实现预期效果。 

　　以下是 System.Windows.Media.Animation 命名空间中，17个线性插值动画类。　　

ByteAnimation

ColorAnimation

DecimalAnimation

DoubleAnimation

Int16Animation

Int32Animation

Int64Animation

Point3DAnimation

PointAnimation

QuaternionAnimation

RectAnimation

Rotation3DAnimation

SingleAnimation

SizeAnimation

ThicknessAnimation

Vector3DAnimation

VectorAnimation

示例1：以 DoubleAnimation 为例，实现文字的淡入效果。

　　在XAML中可以直接定义动画，以下示例是以后台代码形式实现的动画。

　　XAML

<TextBlock Height="50" Width="220" Foreground="#326939" FontSize="36" Name="textBlock1" Text="文字淡入效果"/>

　　CS　　

DoubleAnimation da = new DoubleAnimation();
da.From = 0;    //起始值
da.To = 1;      //结束值
da.Duration = TimeSpan.FromSeconds(3);         //动画持续时间
this.textBlock1.BeginAnimation(TextBlock.OpacityProperty, da);//开始动画

　　

示例2：利用 ThicknessAnimation ，实现元素平移效果。

　　XMAL

<TextBlock Height="50" Foreground="#326939" Margin="0,100,0,0" FontSize="36" Name="textBlock1" Text="文字平移"/>

　　CS

//文字平移，Margin属性是Thickness类型，选择ThicknessAnimation
ThicknessAnimation ta = new ThicknessAnimation();
ta.From = new Thickness(0, 100, 0, 0);             //起始值
ta.To = new Thickness(240, 100, 0, 0);        //结束值
ta.Duration = TimeSpan.FromSeconds(3);         //动画持续时间
this.textBlock1.BeginAnimation(TextBlock.MarginProperty, ta);//开始动画

2、关键帧动画

　　关键帧动画是以时间为节点，在指定时间节点上，属性达到某个值。

　　以下是 System.Windows.Media.Animation 命名空间中，22个关键帧动画类。　　

BooleanAnimationUsingKeyFrames

ByteAnimationUsingKeyFrames

CharAnimationUsingKeyFrames

ColorAnimationUsingKeyFrames

DecimalAnimationUsingKeyFrames

DoubleAnimationUsingKeyFrames

Int16AnimationUsingKeyFrames

Int32AnimationUsingKeyFrames

Int64AnimationUsingKeyFrames

MatrixAnimationUsingKeyFrames

ObjectAnimationUsingKeyFrames

Point3DAnimationUsingKeyFrames

PointAnimationUsingKeyFrames

QuaternionAnimationUsingKeyFrames

RectAnimationUsingKeyFrames

Rotation3DAnimationUsingKeyFrames

SingleAnimationUsingKeyFrames

SizeAnimationUsingKeyFrames

StringAnimationUsingKeyFrames

ThicknessAnimationUsingKeyFrames

Vector3DAnimationUsingKeyFrames

VectorAnimationUsingKeyFrames

示例3：Border宽度的关键帧动画

XAML

<Border Height="32" Width="0" Background="#326939"  Name="border1"/>

CS

复制代码
//Border长度关键帧动画
DoubleAnimationUsingKeyFrames dak = new DoubleAnimationUsingKeyFrames();
//关键帧定义
dak.KeyFrames.Add(new LinearDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
dak.KeyFrames.Add(new LinearDoubleKeyFrame(240, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))));
dak.KeyFrames.Add(new LinearDoubleKeyFrame(240, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6))));
dak.KeyFrames.Add(new LinearDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(9))));
            
dak.BeginTime = TimeSpan.FromSeconds(2);//从第2秒开始动画
dak.RepeatBehavior = new RepeatBehavior(3);//动画重复3次
//开始动画
this.border1.BeginAnimation(Border.WidthProperty, dak);
复制代码

　　（程序运行时开始计时，第0秒）

　　0~5：动画尚未开始；

　　5~8：border1宽度从0增加到240；

　　8~11：border1宽度保持240不变；

　　11~14：border1宽度从240减少到0；

　　14-17：又从0增加到240……（即5~14的过程循环3次）

3、路径动画

　　基于路径的动画，比起前两种更加专业一些。它的表现方式是，修改数值使其符合PathGeometry对象描述的形状，并且让元素沿着路径移动。以下是 System.Windows.Media.Animation 命名空间中，3个路径动画类。

DoubleAnimationUsingPath

MatrixAnimationUsingPath

PointAnimationUsingPath

示例4：基于路径动画的演示

XMAL（该动画是在XAML中定义，使用事件触发器，窗体加载时开始动画）

复制代码
<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="360" Width="480">
    <Window.Resources>
        <!--路径资源-->
        <PathGeometry x:Key="path">
            <PathFigure IsClosed="True">
                <ArcSegment Point="200,200" Size="30,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="300,200" Size="5,5"></ArcSegment>
            </PathFigure>
        </PathGeometry>
    </Window.Resources>
    <!---事件触发器，窗体加载时动画开始，周期6秒，无限循环-->
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Left)"
                     PathGeometry="{StaticResource path}" Duration="0:0:6" RepeatBehavior="Forever" Source="X"></DoubleAnimationUsingPath>
                    <DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Top)"
                     PathGeometry="{StaticResource path}" Duration="0:0:6" RepeatBehavior="Forever" Source="Y"></DoubleAnimationUsingPath>
                </Storyboard>                
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    <Canvas>
        <!--显示路径-->
        <Path Margin="30" Stroke="#ddd" Data="{StaticResource path}"></Path>
        <!--动画元素-->
        <Image Name="image" Source="me.png" Width="48" Height="48" />
    </Canvas>
</Window>
复制代码

　　我的头像将沿着曲线路径进行移动，由于RepeatBehavior属性设置为Forever，则动画将无限循环。

====================================================

WPF翻转动画

小丫头比较调皮，为了做个东东来哄一下小丫头，我想到了做一个简单的三维翻转动画。在登录QQ 2013 的时候，我看到登录窗口也有类似的动画。

在WPF中要翻转对象，估计是得用三维变换，所以我用到了AxisAngleRotation3D，让图形绕着Z轴来旋转。

先看看效果。

是的，就是这样的效果，在XAML中，由于涉及三维图形，我先做了两个用户控件，作为正面和背面，然后让它旋转。

设计完用户控件后，就在主窗口上放一个Viewport3D控件，这个是必须的，它是三维模型的容器，如果不用就不知道怎么弄出三维图形来了。具体请看下面的XAML：

[csharp] view plaincopyprint?
  1. <Window x:Class="翻转.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="MainWindow" Height="420" Width="650"  
  5.         xmlns:local="clr-namespace:翻转"  
  6.         WindowStyle="None"  
  7.         ResizeMode="NoResize"  
  8.         AllowsTransparency="True"  
  9.         Background="Transparent"  
  10.         WindowStartupLocation="CenterScreen">  
  11.     <Grid>  
  12.         <Grid.RowDefinitions>  
  13.             <RowDefinition Height="*"/>  
  14.             <RowDefinition Height="auto"/>  
  15.         </Grid.RowDefinitions>  
  16.         <Viewport3D Grid.Row="0" Margin="3">  
  17.             <Viewport3D.Camera>  
  18.                 <PerspectiveCamera Position="0 0 800" LookDirection="0 0 -1" NearPlaneDistance="100"/>  
  19.             </Viewport3D.Camera>  
  20.             <Viewport3D.Children>  
  21.                 <ContainerUIElement3D>  
  22.                     <Viewport2DVisual3D>  
  23.                         <Viewport2DVisual3D.Geometry>  
  24.                             <MeshGeometry3D Positions="-200 150 0  -200 -150 0  200 -150 0  200 150 0" TriangleIndices="0 1 2  0 2 3" TextureCoordinates="0 0  0 1  1 1  1 0"/>  
  25.                         </Viewport2DVisual3D.Geometry>  
  26.                         <Viewport2DVisual3D.Material>  
  27.                             <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>  
  28.                         </Viewport2DVisual3D.Material>  
  29.                         <Viewport2DVisual3D.Visual>  
  30.                             <local:UcSample1 Width="400" Height="300"/>  
  31.                         </Viewport2DVisual3D.Visual>  
  32.                     </Viewport2DVisual3D>  
  33.                     <Viewport2DVisual3D>  
  34.                         <Viewport2DVisual3D.Geometry>  
  35.                             <MeshGeometry3D Positions="200 150 0  200 -150 0  -200 -150 0  -200 150 0" TriangleIndices="0 1 2  0 2 3" TextureCoordinates="0 0  0 1  1 1  1 0"/>  
  36.                         </Viewport2DVisual3D.Geometry>  
  37.                         <Viewport2DVisual3D.Material>  
  38.                             <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>  
  39.                         </Viewport2DVisual3D.Material>  
  40.                         <Viewport2DVisual3D.Visual>  
  41.                             <local:UcSample2 Width="400" Height="300"/>  
  42.                         </Viewport2DVisual3D.Visual>  
  43.                     </Viewport2DVisual3D>  
  44.                     <!-- 三维变换 -->  
  45.                     <ContainerUIElement3D.Transform>  
  46.                         <RotateTransform3D CenterX="0.5" CenterY="0.5" CenterZ="0.5">  
  47.                             <RotateTransform3D.Rotation>  
  48.                                 <AxisAngleRotation3D x:Name="axr" Angle="0" Axis="0 1 0"/>  
  49.                             </RotateTransform3D.Rotation>  
  50.                         </RotateTransform3D>  
  51.                     </ContainerUIElement3D.Transform>  
  52.                 </ContainerUIElement3D>  
  53.                 <ModelVisual3D>  
  54.                     <ModelVisual3D.Content>  
  55.                         <DirectionalLight Color="Transparent"/>  
  56.                     </ModelVisual3D.Content>  
  57.                 </ModelVisual3D>  
  58.             </Viewport3D.Children>  
  59.         </Viewport3D>  
  60.         <StackPanel Grid.Row="1" Margin="0,5,0,6" Orientation="Horizontal" HorizontalAlignment="Center">  
  61.             <Button Padding="25,5" Content="向前" Click="OnClick"/>   
  62.             <Button Padding="25,5" Content="向后" Click="OnClick" Margin="12,0,0,0"/>  
  63.             <Button Padding="25,5" Content="关闭" Click="OnClick" Margin="12,0,0,0"/>  
  64.         </StackPanel>  
  65.     </Grid>  
  66. </Window>  
<Window x:Class="翻转.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="420" Width="650"
        xmlns:local="clr-namespace:翻转"
        WindowStyle="None"
        ResizeMode="NoResize"
        AllowsTransparency="True"
        Background="Transparent"
        WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Viewport3D Grid.Row="0" Margin="3">
            <Viewport3D.Camera>
                <PerspectiveCamera Position="0 0 800" LookDirection="0 0 -1" NearPlaneDistance="100"/>
            </Viewport3D.Camera>
            <Viewport3D.Children>
                <ContainerUIElement3D>
                    <Viewport2DVisual3D>
                        <Viewport2DVisual3D.Geometry>
                            <MeshGeometry3D Positions="-200 150 0  -200 -150 0  200 -150 0  200 150 0" TriangleIndices="0 1 2  0 2 3" TextureCoordinates="0 0  0 1  1 1  1 0"/>
                        </Viewport2DVisual3D.Geometry>
                        <Viewport2DVisual3D.Material>
                            <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>
                        </Viewport2DVisual3D.Material>
                        <Viewport2DVisual3D.Visual>
                            <local:UcSample1 Width="400" Height="300"/>
                        </Viewport2DVisual3D.Visual>
                    </Viewport2DVisual3D>
                    <Viewport2DVisual3D>
                        <Viewport2DVisual3D.Geometry>
                            <MeshGeometry3D Positions="200 150 0  200 -150 0  -200 -150 0  -200 150 0" TriangleIndices="0 1 2  0 2 3" TextureCoordinates="0 0  0 1  1 1  1 0"/>
                        </Viewport2DVisual3D.Geometry>
                        <Viewport2DVisual3D.Material>
                            <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>
                        </Viewport2DVisual3D.Material>
                        <Viewport2DVisual3D.Visual>
                            <local:UcSample2 Width="400" Height="300"/>
                        </Viewport2DVisual3D.Visual>
                    </Viewport2DVisual3D>
                    <!-- 三维变换 -->
                    <ContainerUIElement3D.Transform>
                        <RotateTransform3D CenterX="0.5" CenterY="0.5" CenterZ="0.5">
                            <RotateTransform3D.Rotation>
                                <AxisAngleRotation3D x:Name="axr" Angle="0" Axis="0 1 0"/>
                            </RotateTransform3D.Rotation>
                        </RotateTransform3D>
                    </ContainerUIElement3D.Transform>
                </ContainerUIElement3D>
                <ModelVisual3D>
                    <ModelVisual3D.Content>
                        <DirectionalLight Color="Transparent"/>
                    </ModelVisual3D.Content>
                </ModelVisual3D>
            </Viewport3D.Children>
        </Viewport3D>
        <StackPanel Grid.Row="1" Margin="0,5,0,6" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Padding="25,5" Content="向前" Click="OnClick"/> 
            <Button Padding="25,5" Content="向后" Click="OnClick" Margin="12,0,0,0"/>
            <Button Padding="25,5" Content="关闭" Click="OnClick" Margin="12,0,0,0"/>
        </StackPanel>
    </Grid>
</Window>

里面还有几个按钮，我是通过单击按钮来控制动画的，所以，后面还要写必要的处理代码，生成动画。

[csharp] view plaincopyprint?
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using System.Windows;  
  7. using System.Windows.Controls;  
  8. using System.Windows.Data;  
  9. using System.Windows.Documents;  
  10. using System.Windows.Input;  
  11. using System.Windows.Media;  
  12. using System.Windows.Media.Imaging;  
  13. using System.Windows.Navigation;  
  14. using System.Windows.Shapes;  
  15. using System.Windows.Media.Media3D;  
  16. using System.Windows.Media.Animation;  
  17.   
  18. namespace 翻转  
  19. {  
  20.     /// <summary>  
  21.     /// MainWindow.xaml 的交互逻辑  
  22.     /// </summary>  
  23.     public partial class MainWindow : Window  
  24.     {  
  25.         public MainWindow()  
  26.         {  
  27.             InitializeComponent();  
  28.         }  
  29.   
  30.         private void OnClick(object sender, RoutedEventArgs e)  
  31.         {  
  32.             Button btn = e.OriginalSource as Button;  
  33.             if (btn != null)  
  34.             {  
  35.                 string s = btn.Content.ToString();  
  36.                 if (s == "关闭")  
  37.                 {  
  38.                     this.Close();  
  39.                 }  
  40.                 DoubleAnimation da = new DoubleAnimation();  
  41.                 da.Duration = new Duration(TimeSpan.FromSeconds(1));  
  42.                 if (s == "向前")  
  43.                 {  
  44.                     da.To = 0d;  
  45.                 }  
  46.                 else if (s == "向后")  
  47.                 {  
  48.                     da.To = 180d;  
  49.                 }  
  50.                 this.axr.BeginAnimation(AxisAngleRotation3D.AngleProperty, da);  
  51.             }  
  52.         }  
  53.     }  
  54. }  
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Media3D;
using System.Windows.Media.Animation;

namespace 翻转
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void OnClick(object sender, RoutedEventArgs e)
        {
            Button btn = e.OriginalSource as Button;
            if (btn != null)
            {
                string s = btn.Content.ToString();
                if (s == "关闭")
                {
                    this.Close();
                }
                DoubleAnimation da = new DoubleAnimation();
                da.Duration = new Duration(TimeSpan.FromSeconds(1));
                if (s == "向前")
                {
                    da.To = 0d;
                }
                else if (s == "向后")
                {
                    da.To = 180d;
                }
                this.axr.BeginAnimation(AxisAngleRotation3D.AngleProperty, da);
            }
        }
    }
}

当图形绕Z轴转0度，就表示是正面，如果为180度，就转到反面。我们在声明Viewport2DVisual3D.Geometry的坐标模型，即三角型叠加模型，要注意点逆时针方向顺序来定义，如果弄反了，那么图形就跑到模型的背面去了。因此，正面图形和背面图形的点的方向是刚好相反的。

三维的东西不太好解释，所以我稍后把代码上传，以供参考。

 下载地址：http://download.csdn.net/detail/tcjiaan/5243065

以下是用WPF实现的的一个窗口，为了使演示变得简单，我在窗口中只放了一个按钮。如下图所示：

但我们今天的主题是窗口启动时和关闭时都展示动画，如何进行动画处理，我以前写过一些WPF相关的文章。

要将窗口进行自定义，首先我们要去掉默认窗口的边框、背景色和标题栏。

这个不难，在WPF中，要把窗体彻底透明，只要做三件事即可：

（1）设置WindowStyle属性为None。

（2）AllowsTransparency属性设置为true。

（3）Background属性为Transparent。

为了使窗体易于控件，可以考虑设置ResizeMode="NoResize"。

窗口变成了透明，这使得窗口的整个区域就需要我们自己来设计了。

为了使自定义的窗口也有边框，在最外层，我们应该考虑使用Border，然后里面放一个Grid，这个Grid划分为两行，第一行作为标题栏，第二行作为窗口的客户区域。

[html] view plaincopyprint?
  1. <Border x:Name="wb" CornerRadius="5" BorderThickness="3" BorderBrush="#FF1A55AA">  
  2.     <Border.Background>  
  3.         <LinearGradientBrush EndPoint="0.8,1" StartPoint="0.33,0">  
  4.             <GradientStop Color="#FF50B3E2" Offset="0"/>  
  5.             <GradientStop Color="#FF084168" Offset="1"/>  
  6.         </LinearGradientBrush>  
  7.     </Border.Background>  
  8.     <Grid x:Name="root" >  
  9.         <Grid.RowDefinitions>  
  10.             <RowDefinition Height="auto"/>  
  11.             <RowDefinition Height="*"/>  
  12.         </Grid.RowDefinitions>  
  13.         ……  
  14.     </Grid>  
  15. </Border>  
    <Border x:Name="wb" CornerRadius="5" BorderThickness="3" BorderBrush="#FF1A55AA">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.8,1" StartPoint="0.33,0">
                <GradientStop Color="#FF50B3E2" Offset="0"/>
                <GradientStop Color="#FF084168" Offset="1"/>
            </LinearGradientBrush>
        </Border.Background>
        <Grid x:Name="root" >
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            ……
        </Grid>
    </Border>

以上是窗口的大致框架。

接下来就是对最外层的Border进行剪裁，即设置它的Clip属性。

[html] view plaincopyprint?
  1. <Border x:Name="wb" CornerRadius="5" BorderThickness="3" BorderBrush="#FF1A55AA">  
  2.     <Border.Background>  
  3.         <LinearGradientBrush EndPoint="0.8,1" StartPoint="0.33,0">  
  4.             <GradientStop Color="#FF50B3E2" Offset="0"/>  
  5.             <GradientStop Color="#FF084168" Offset="1"/>  
  6.         </LinearGradientBrush>  
  7.     </Border.Background>  
  8.     <Border.Clip>  
  9.         <GeometryGroup FillRule="Nonzero">  
  10.             <RectangleGeometry x:Name="r1" Rect="0,50,1000,100"/>  
  11.             <RectangleGeometry x:Name="r2" Rect="0,220,1000,100"/>  
  12.             <RectangleGeometry x:Name="r3" Rect="50,0,90,1000"/>  
  13.             <RectangleGeometry x:Name="r4" Rect="360,0,160,1000"/>  
  14.         </GeometryGroup>  
  15.     </Border.Clip>  
  16.     <Grid x:Name="root" >  
  17.         <Grid.RowDefinitions>  
  18.             <RowDefinition Height="auto"/>  
  19.             <RowDefinition Height="*"/>  
  20.         </Grid.RowDefinitions>  
  21.         ……  
  22.     </Grid>  
  23. </Border>  
    <Border x:Name="wb" CornerRadius="5" BorderThickness="3" BorderBrush="#FF1A55AA">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.8,1" StartPoint="0.33,0">
                <GradientStop Color="#FF50B3E2" Offset="0"/>
                <GradientStop Color="#FF084168" Offset="1"/>
            </LinearGradientBrush>
        </Border.Background>
        <Border.Clip>
            <GeometryGroup FillRule="Nonzero">
                <RectangleGeometry x:Name="r1" Rect="0,50,1000,100"/>
                <RectangleGeometry x:Name="r2" Rect="0,220,1000,100"/>
                <RectangleGeometry x:Name="r3" Rect="50,0,90,1000"/>
                <RectangleGeometry x:Name="r4" Rect="360,0,160,1000"/>
            </GeometryGroup>
        </Border.Clip>
        <Grid x:Name="root" >
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            ……
        </Grid>
    </Border>

那么，通过这四个矩形的裁剪，窗口会变成什么模样呢。看下图。

下面就是窗口的启动动画，通过对这四个矩形进行动画处理，在窗体的Loaded事件中播放动画，当动画播放完成时，再把这些Clip去掉，即设为null。

[html] view plaincopyprint?
  1. <Window.Resources>  
  2.     <Storyboard x:Key="start">  
  3.         <RectAnimation Storyboard.TargetName="r1" Storyboard.TargetProperty="Rect"  
  4.                        Duration="0:0:6" To="0,0,900,900"/>  
  5.         <RectAnimation Storyboard.TargetName="r2" Storyboard.TargetProperty="Rect"  
  6.                        Duration="0:0:5" To="20,20,700,800"/>  
  7.         <RectAnimation Storyboard.TargetName="r3" Storyboard.TargetProperty="Rect"  
  8.                        Duration="0:0:6" To="85,0,850,700"/>  
  9.         <RectAnimation Storyboard.TargetName="r4" Storyboard.TargetProperty="Rect"  
  10.                        Duration="0:0:6" To="0,250,800,700"/>  
  11.         <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"  
  12.                          From="0.2" To="1" Duration="0:0:6"/>  
  13.     </Storyboard>  
  14.     <Storyboard x:Key="end">  
  15.         <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"  
  16.                          Duration="0:0:5" From="1" To="0"/>  
  17.         <DoubleAnimation Storyboard.TargetName="rt" Storyboard.TargetProperty="Angle"  
  18.                          Duration="0:0:5" From="0" To="720"/>  
  19.         <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleX"  
  20.                          Duration="0:0:5" From="1" To="0.3"/>  
  21.         <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleY"  
  22.                          Duration="0:0:5" From="1" To="0.1"/>  
  23.     </Storyboard>  
  24. </Window.Resources>  
    <Window.Resources>
        <Storyboard x:Key="start">
            <RectAnimation Storyboard.TargetName="r1" Storyboard.TargetProperty="Rect"
                           Duration="0:0:6" To="0,0,900,900"/>
            <RectAnimation Storyboard.TargetName="r2" Storyboard.TargetProperty="Rect"
                           Duration="0:0:5" To="20,20,700,800"/>
            <RectAnimation Storyboard.TargetName="r3" Storyboard.TargetProperty="Rect"
                           Duration="0:0:6" To="85,0,850,700"/>
            <RectAnimation Storyboard.TargetName="r4" Storyboard.TargetProperty="Rect"
                           Duration="0:0:6" To="0,250,800,700"/>
            <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"
                             From="0.2" To="1" Duration="0:0:6"/>
        </Storyboard>
        <Storyboard x:Key="end">
            <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"
                             Duration="0:0:5" From="1" To="0"/>
            <DoubleAnimation Storyboard.TargetName="rt" Storyboard.TargetProperty="Angle"
                             Duration="0:0:5" From="0" To="720"/>
            <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleX"
                             Duration="0:0:5" From="1" To="0.3"/>
            <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleY"
                             Duration="0:0:5" From="1" To="0.1"/>
        </Storyboard>
    </Window.Resources>

上面的资源中，包含两个动画，后面一个是窗口关闭时的动画。

另外，我们的窗口还需要两个小按钮，就是标题栏上方的“最小化”和“关闭”按钮，用Button即可，不过我们要为Button类自定义一下控件模板。

[html] view plaincopyprint?
  1. <Application.Resources>  
  2.     <Style TargetType="{x:Type Button}" x:Key="captionButtonStyle">  
  3.         <Setter Property="Template">  
  4.             <Setter.Value>  
  5.                 <ControlTemplate  TargetType="{x:Type Button}">  
  6.                     <Grid>  
  7.                         <VisualStateManager.VisualStateGroups>  
  8.                             <VisualStateGroup x:Name="CommonStates">  
  9.                                 <VisualState x:Name="Normal"/>  
  10.                                 <VisualState x:Name="MouseOver">  
  11.                                     <Storyboard>  
  12.                                         <DoubleAnimation Storyboard.TargetName="lbd"  
  13.                                                          Storyboard.TargetProperty="Opacity"  
  14.                                                          Duration="0:0:0.3"  
  15.                                                          To="1"/>  
  16.                                     </Storyboard>  
  17.                                 </VisualState>  
  18.                                 <VisualState x:Name="Pressed">  
  19.                                     <Storyboard>  
  20.                                         <DoubleAnimation Storyboard.TargetName="lbd"  
  21.                                                          Storyboard.TargetProperty="Opacity"  
  22.                                                          Duration="0"  
  23.                                                          To="1"/>  
  24.                                     </Storyboard>  
  25.                                 </VisualState>  
  26.                                 <VisualState x:Name="Disabled">  
  27.                                     <Storyboard>  
  28.                                         <DoubleAnimation Storyboard.TargetName="rctdisable"  
  29.                                                          Storyboard.TargetProperty="Opacity"  
  30.                                                          Duration="0" To="0.45"/>  
  31.                                     </Storyboard>  
  32.                                 </VisualState>  
  33.                             </VisualStateGroup>  
  34.                             <VisualStateGroup x:Name="FocusStates">  
  35.                                 <VisualState x:Name="Focused"/>  
  36.                             </VisualStateGroup>  
  37.                             <VisualStateGroup x:Name="ValidationStates">  
  38.                                 <VisualState x:Name="InvalidFocused"/>  
  39.                                 <VisualState x:Name="InvalidUnfocused"/>  
  40.                             </VisualStateGroup>  
  41.                         </VisualStateManager.VisualStateGroups>  
  42.   
  43.                         <Border x:Name="lbd" BorderThickness="0" Background="{TemplateBinding Background}" CornerRadius="2" Opacity="0"/>  
  44.                         <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />  
  45.                         <Rectangle x:Name="rctdisable" Opacity="0" Fill="#FFF4F8F9"/>  
  46.                     </Grid>  
  47.                 </ControlTemplate>  
  48.             </Setter.Value>  
  49.         </Setter>  
  50.         <Setter Property="FontFamily" Value="Segoe UI Symbol"/>  
  51.         <Setter Property="FontSize" Value="14"/>  
  52.         <Setter Property="Foreground" Value="White"/>  
  53.         <Setter Property="Padding" Value="3"/>  
  54.     </Style>  
  55.     <Style x:Key="minCaptionButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource captionButtonStyle}">  
  56.         <Setter Property="Content" Value="�"/>  
  57.         <Setter Property="Background">  
  58.             <Setter.Value>  
  59.                 <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">  
  60.                     <GradientStop Color="#BFFFFFFF"/>  
  61.                     <GradientStop Offset="1"/>  
  62.                 </LinearGradientBrush>  
  63.             </Setter.Value>  
  64.         </Setter>  
  65.     </Style>  
  66.     <Style x:Key="closeCaptionButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource captionButtonStyle}">  
  67.         <Setter Property="Content" Value="�"/>  
  68.         <Setter Property="Background">  
  69.             <Setter.Value>  
  70.                 <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">  
  71.                     <GradientStop Color="#FFEA1E1E" Offset="0"/>  
  72.                     <GradientStop Color="#CCF5544C" Offset="0.7"/>  
  73.                     <GradientStop Offset="1" Color="#33F94949"/>  
  74.                 </LinearGradientBrush>  
  75.             </Setter.Value>  
  76.         </Setter>  
  77.     </Style>  
  78. </Application.Resources>  
    <Application.Resources>
        <Style TargetType="{x:Type Button}" x:Key="captionButtonStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate  TargetType="{x:Type Button}">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="lbd"
                                                             Storyboard.TargetProperty="Opacity"
                                                             Duration="0:0:0.3"
                                                             To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="lbd"
                                                             Storyboard.TargetProperty="Opacity"
                                                             Duration="0"
                                                             To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="rctdisable"
                                                             Storyboard.TargetProperty="Opacity"
                                                             Duration="0" To="0.45"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ValidationStates">
                                    <VisualState x:Name="InvalidFocused"/>
                                    <VisualState x:Name="InvalidUnfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Border x:Name="lbd" BorderThickness="0" Background="{TemplateBinding Background}" CornerRadius="2" Opacity="0"/>
                            <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
                            <Rectangle x:Name="rctdisable" Opacity="0" Fill="#FFF4F8F9"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Padding" Value="3"/>
        </Style>
        <Style x:Key="minCaptionButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource captionButtonStyle}">
            <Setter Property="Content" Value="�"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#BFFFFFFF"/>
                        <GradientStop Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="closeCaptionButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource captionButtonStyle}">
            <Setter Property="Content" Value="�"/>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#FFEA1E1E" Offset="0"/>
                        <GradientStop Color="#CCF5544C" Offset="0.7"/>
                        <GradientStop Offset="1" Color="#33F94949"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

由于这些小按钮都比较相似，因此，我们先定义一个通用的样式captionButtonStyle，而后的minCaptionButtonStyle和closeCaptionButtonStyle都是基于这个样式的。

注意按钮的字体要使用Segoe UI Symbol，这样我们可以通过编号来引用一些特殊符号，如关闭按钮上的 X 。

下面我们回到主窗体，现在我把整个代码贴出来。

[html] view plaincopyprint?
  1. <Window x:Class="WpfApplication2.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="主窗口" Height="400" Width="600"   
  5.         ResizeMode="NoResize" WindowStartupLocation="CenterScreen"  
  6.         WindowStyle="None" AllowsTransparency="True" Background="Transparent"  
  7.         RenderTransformOrigin="0.5,0.5">  
  8.       
  9.     <Border x:Name="wb" CornerRadius="5" BorderThickness="3" BorderBrush="#FF1A55AA">  
  10.         <Border.Background>  
  11.             <LinearGradientBrush EndPoint="0.8,1" StartPoint="0.33,0">  
  12.                 <GradientStop Color="#FF50B3E2" Offset="0"/>  
  13.                 <GradientStop Color="#FF084168" Offset="1"/>  
  14.             </LinearGradientBrush>  
  15.         </Border.Background>  
  16.         <Border.Clip>  
  17.             <GeometryGroup FillRule="Nonzero">  
  18.                 <RectangleGeometry x:Name="r1" Rect="0,50,1000,100"/>  
  19.                 <RectangleGeometry x:Name="r2" Rect="0,220,1000,100"/>  
  20.                 <RectangleGeometry x:Name="r3" Rect="50,0,90,1000"/>  
  21.                 <RectangleGeometry x:Name="r4" Rect="360,0,160,1000"/>  
  22.             </GeometryGroup>  
  23.         </Border.Clip>  
  24.         <Grid x:Name="root" >  
  25.             <Grid.RowDefinitions>  
  26.                 <RowDefinition Height="auto"/>  
  27.                 <RowDefinition Height="*"/>  
  28.             </Grid.RowDefinitions>  
  29.             <Border x:Name="captiobd" Grid.Row="0" Background="#FF1A55AA" Height="32" MouseLeftButtonDown="onLDown">  
  30.                 <Grid>  
  31.                     <TextBlock Text="{Binding Path=Title,RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType=Window}}"  
  32.                                Foreground="White" FontWeight="Bold" FontSize="18" FontFamily="宋体"  
  33.                                HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="9,0,0,5"/>  
  34.                     <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right"  
  35.                                 Margin="0,0,9,11">  
  36.                         <Button Style="{DynamicResource minCaptionButtonStyle}" Click="onMin" ToolTip="最小化"/>  
  37.                         <Button Margin="6,0,0,0" Style="{DynamicResource closeCaptionButtonStyle}" Click="onClick" ToolTip="关闭"/>  
  38.                     </StackPanel>  
  39.                 </Grid>  
  40.             </Border>  
  41.             <Button Content="关闭" Grid.Row="1" Click="onClick" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Padding="15"  />  
  42.         </Grid>  
  43.     </Border>  
  44.     <Window.RenderTransform>  
  45.         <TransformGroup>  
  46.             <RotateTransform x:Name="rt" Angle="0"/>  
  47.             <ScaleTransform x:Name="sct" ScaleX="1" ScaleY="1"/>  
  48.         </TransformGroup>  
  49.     </Window.RenderTransform>  
  50.     <Window.Resources>  
  51.         <Storyboard x:Key="start">  
  52.             <RectAnimation Storyboard.TargetName="r1" Storyboard.TargetProperty="Rect"  
  53.                            Duration="0:0:6" To="0,0,900,900"/>  
  54.             <RectAnimation Storyboard.TargetName="r2" Storyboard.TargetProperty="Rect"  
  55.                            Duration="0:0:5" To="20,20,700,800"/>  
  56.             <RectAnimation Storyboard.TargetName="r3" Storyboard.TargetProperty="Rect"  
  57.                            Duration="0:0:6" To="85,0,850,700"/>  
  58.             <RectAnimation Storyboard.TargetName="r4" Storyboard.TargetProperty="Rect"  
  59.                            Duration="0:0:6" To="0,250,800,700"/>  
  60.             <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"  
  61.                              From="0.2" To="1" Duration="0:0:6"/>  
  62.         </Storyboard>  
  63.         <Storyboard x:Key="end">  
  64.             <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"  
  65.                              Duration="0:0:5" From="1" To="0"/>  
  66.             <DoubleAnimation Storyboard.TargetName="rt" Storyboard.TargetProperty="Angle"  
  67.                              Duration="0:0:5" From="0" To="720"/>  
  68.             <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleX"  
  69.                              Duration="0:0:5" From="1" To="0.3"/>  
  70.             <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleY"  
  71.                              Duration="0:0:5" From="1" To="0.1"/>  
  72.         </Storyboard>  
  73.     </Window.Resources>  
  74. </Window>  
<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="主窗口" Height="400" Width="600" 
        ResizeMode="NoResize" WindowStartupLocation="CenterScreen"
        WindowStyle="None" AllowsTransparency="True" Background="Transparent"
        RenderTransformOrigin="0.5,0.5">
    
    <Border x:Name="wb" CornerRadius="5" BorderThickness="3" BorderBrush="#FF1A55AA">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.8,1" StartPoint="0.33,0">
                <GradientStop Color="#FF50B3E2" Offset="0"/>
                <GradientStop Color="#FF084168" Offset="1"/>
            </LinearGradientBrush>
        </Border.Background>
        <Border.Clip>
            <GeometryGroup FillRule="Nonzero">
                <RectangleGeometry x:Name="r1" Rect="0,50,1000,100"/>
                <RectangleGeometry x:Name="r2" Rect="0,220,1000,100"/>
                <RectangleGeometry x:Name="r3" Rect="50,0,90,1000"/>
                <RectangleGeometry x:Name="r4" Rect="360,0,160,1000"/>
            </GeometryGroup>
        </Border.Clip>
        <Grid x:Name="root" >
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Border x:Name="captiobd" Grid.Row="0" Background="#FF1A55AA" Height="32" MouseLeftButtonDown="onLDown">
                <Grid>
                    <TextBlock Text="{Binding Path=Title,RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType=Window}}"
                               Foreground="White" FontWeight="Bold" FontSize="18" FontFamily="宋体"
                               HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="9,0,0,5"/>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right"
                                Margin="0,0,9,11">
                        <Button Style="{DynamicResource minCaptionButtonStyle}" Click="onMin" ToolTip="最小化"/>
                        <Button Margin="6,0,0,0" Style="{DynamicResource closeCaptionButtonStyle}" Click="onClick" ToolTip="关闭"/>
                    </StackPanel>
                </Grid>
            </Border>
            <Button Content="关闭" Grid.Row="1" Click="onClick" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Padding="15"  />
        </Grid>
    </Border>
    <Window.RenderTransform>
        <TransformGroup>
            <RotateTransform x:Name="rt" Angle="0"/>
            <ScaleTransform x:Name="sct" ScaleX="1" ScaleY="1"/>
        </TransformGroup>
    </Window.RenderTransform>
    <Window.Resources>
        <Storyboard x:Key="start">
            <RectAnimation Storyboard.TargetName="r1" Storyboard.TargetProperty="Rect"
                           Duration="0:0:6" To="0,0,900,900"/>
            <RectAnimation Storyboard.TargetName="r2" Storyboard.TargetProperty="Rect"
                           Duration="0:0:5" To="20,20,700,800"/>
            <RectAnimation Storyboard.TargetName="r3" Storyboard.TargetProperty="Rect"
                           Duration="0:0:6" To="85,0,850,700"/>
            <RectAnimation Storyboard.TargetName="r4" Storyboard.TargetProperty="Rect"
                           Duration="0:0:6" To="0,250,800,700"/>
            <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"
                             From="0.2" To="1" Duration="0:0:6"/>
        </Storyboard>
        <Storyboard x:Key="end">
            <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"
                             Duration="0:0:5" From="1" To="0"/>
            <DoubleAnimation Storyboard.TargetName="rt" Storyboard.TargetProperty="Angle"
                             Duration="0:0:5" From="0" To="720"/>
            <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleX"
                             Duration="0:0:5" From="1" To="0.3"/>
            <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleY"
                             Duration="0:0:5" From="1" To="0.1"/>
        </Storyboard>
    </Window.Resources>
</Window>

在X按钮点击时，我们不是直接Close窗口，因为我们还要关闭动画，所以，单击X按钮时播放关闭动画，当动画结束时，才把窗口真正关掉。

[csharp] view plaincopyprint?
  1. public partial class MainWindow : Window  
  2. {  
  3.     Storyboard stdStart, stdEnd;  
  4.     public MainWindow()  
  5.     {  
  6.         InitializeComponent();  
  7.         stdStart = (Storyboard)this.Resources["start"];  
  8.         stdEnd = (Storyboard)this.Resources["end"];  
  9.         stdStart.Completed += (a, b) =>  
  10.         {  
  11.             this.root.Clip = null;  
  12.         };  
  13.         stdEnd.Completed += (c, d) =>  
  14.             {  
  15.                 this.Close();  
  16.             };  
  17.         this.Loaded += MainWindow_Loaded;  
  18.     }  
  19.   
  20.     void MainWindow_Loaded(object sender, RoutedEventArgs e)  
  21.     {  
  22.         stdStart.Begin();  
  23.     }  
  24.   
  25.     private void onClick(object sender, RoutedEventArgs e)  
  26.     {  
  27.         stdEnd.Begin();  
  28.     }  
  29.   
  30.     private void onLDown(object sender, MouseButtonEventArgs e)  
  31.     {  
  32.         this.DragMove();  
  33.         e.Handled = true;  
  34.     }  
  35.   
  36.     private void onMin(object sender, RoutedEventArgs e)  
  37.     {  
  38.         this.WindowState = System.Windows.WindowState.Minimized;  
  39.     }  
  40. }  
    public partial class MainWindow : Window
    {
        Storyboard stdStart, stdEnd;
        public MainWindow()
        {
            InitializeComponent();
            stdStart = (Storyboard)this.Resources["start"];
            stdEnd = (Storyboard)this.Resources["end"];
            stdStart.Completed += (a, b) =>
            {
                this.root.Clip = null;
            };
            stdEnd.Completed += (c, d) =>
                {
                    this.Close();
                };
            this.Loaded += MainWindow_Loaded;
        }

        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            stdStart.Begin();
        }

        private void onClick(object sender, RoutedEventArgs e)
        {
            stdEnd.Begin();
        }

        private void onLDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
            e.Handled = true;
        }

        private void onMin(object sender, RoutedEventArgs e)
        {
            this.WindowState = System.Windows.WindowState.Minimized;
        }
    }

好的，现在来看看这个窗口动画吧。

下图是窗口启动时的动画。

下图是窗体关闭时的动画。窗体一边旋转，一边缩小，一边淡出，直到消失。

源代码我随后上传到资源区。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/qq260250932/p/4114948.html