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：

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>

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

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. namespace 翻转
18. {
19. /// <summary>
20. /// MainWindow.xaml 的交互逻辑
21. /// </summary>
22. public partial class MainWindow : Window
23. {
24. public MainWindow()
25. {
26. InitializeComponent();
27. }
28. private void OnClick(object sender, RoutedEventArgs e)
29. {
30. Button btn = e.OriginalSource as Button;
31. if (btn != null)
32. {
33. string s = btn.Content.ToString();
34. if (s == "关闭")
35. {
36. this.Close();
37. }
38. DoubleAnimation da = new DoubleAnimation();
39. da.Duration = new Duration(TimeSpan.FromSeconds(1));
40. if (s == "向前")
41. {
42. da.To = 0d;
43. }
44. else if (s == "向后")
45. {
46. da.To = 180d;
47. }
48. this.axr.BeginAnimation(AxisAngleRotation3D.AngleProperty, da);
49. }
50. }
51. }
52. }

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划分为两行，第一行作为标题栏，第二行作为窗口的客户区域。

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属性。

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。

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类自定义一下控件模板。

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. <Border x:Name="lbd" BorderThickness="0" Background="{TemplateBinding Background}" CornerRadius="2" Opacity="0"/>
43. <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
44. <Rectangle x:Name="rctdisable" Opacity="0" Fill="#FFF4F8F9"/>
45. </Grid>
46. </ControlTemplate>
47. </Setter.Value>
48. </Setter>
49. <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
50. <Setter Property="FontSize" Value="14"/>
51. <Setter Property="Foreground" Value="White"/>
52. <Setter Property="Padding" Value="3"/>
53. </Style>
54. <Style x:Key="minCaptionButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource captionButtonStyle}">
55. <Setter Property="Content" Value=""/>
56. <Setter Property="Background">
57. <Setter.Value>
58. <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
59. <GradientStop Color="#BFFFFFFF"/>
60. <GradientStop Offset="1"/>
61. </LinearGradientBrush>
62. </Setter.Value>
63. </Setter>
64. </Style>
65. <Style x:Key="closeCaptionButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource captionButtonStyle}">
66. <Setter Property="Content" Value=""/>
67. <Setter Property="Background">
68. <Setter.Value>
69. <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
70. <GradientStop Color="#FFEA1E1E" Offset="0"/>
71. <GradientStop Color="#CCF5544C" Offset="0.7"/>
72. <GradientStop Offset="1" Color="#33F94949"/>
73. </LinearGradientBrush>
74. </Setter.Value>
75. </Setter>
76. </Style>
77. </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 。

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

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. <Border x:Name="wb" CornerRadius="5" BorderThickness="3" BorderBrush="#FF1A55AA">
9. <Border.Background>
10. <LinearGradientBrush EndPoint="0.8,1" StartPoint="0.33,0">
11. <GradientStop Color="#FF50B3E2" Offset="0"/>
12. <GradientStop Color="#FF084168" Offset="1"/>
13. </LinearGradientBrush>
14. </Border.Background>
15. <Border.Clip>
16. <GeometryGroup FillRule="Nonzero">
17. <RectangleGeometry x:Name="r1" Rect="0,50,1000,100"/>
18. <RectangleGeometry x:Name="r2" Rect="0,220,1000,100"/>
19. <RectangleGeometry x:Name="r3" Rect="50,0,90,1000"/>
20. <RectangleGeometry x:Name="r4" Rect="360,0,160,1000"/>
21. </GeometryGroup>
22. </Border.Clip>
23. <Grid x:Name="root" >
24. <Grid.RowDefinitions>
25. <RowDefinition Height="auto"/>
26. <RowDefinition Height="*"/>
27. </Grid.RowDefinitions>
28. <Border x:Name="captiobd" Grid.Row="0" Background="#FF1A55AA" Height="32" MouseLeftButtonDown="onLDown">
29. <Grid>
30. <TextBlock Text="{Binding Path=Title,RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType=Window}}"
31. Foreground="White" FontWeight="Bold" FontSize="18" FontFamily="宋体"
32. HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="9,0,0,5"/>
33. <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right"
34. Margin="0,0,9,11">
35. <Button Style="{DynamicResource minCaptionButtonStyle}" Click="onMin" ToolTip="最小化"/>
36. <Button Margin="6,0,0,0" Style="{DynamicResource closeCaptionButtonStyle}" Click="onClick" ToolTip="关闭"/>
37. </StackPanel>
38. </Grid>
39. </Border>
40. <Button Content="关闭" Grid.Row="1" Click="onClick" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Padding="15"  />
41. </Grid>
42. </Border>
43. <Window.RenderTransform>
44. <TransformGroup>
45. <RotateTransform x:Name="rt" Angle="0"/>
46. <ScaleTransform x:Name="sct" ScaleX="1" ScaleY="1"/>
47. </TransformGroup>
48. </Window.RenderTransform>
49. <Window.Resources>
50. <Storyboard x:Key="start">
51. <RectAnimation Storyboard.TargetName="r1" Storyboard.TargetProperty="Rect"
52. Duration="0:0:6" To="0,0,900,900"/>
53. <RectAnimation Storyboard.TargetName="r2" Storyboard.TargetProperty="Rect"
54. Duration="0:0:5" To="20,20,700,800"/>
55. <RectAnimation Storyboard.TargetName="r3" Storyboard.TargetProperty="Rect"
56. Duration="0:0:6" To="85,0,850,700"/>
57. <RectAnimation Storyboard.TargetName="r4" Storyboard.TargetProperty="Rect"
58. Duration="0:0:6" To="0,250,800,700"/>
59. <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"
60. From="0.2" To="1" Duration="0:0:6"/>
61. </Storyboard>
62. <Storyboard x:Key="end">
63. <DoubleAnimation Storyboard.TargetName="wb" Storyboard.TargetProperty="Opacity"
64. Duration="0:0:5" From="1" To="0"/>
65. <DoubleAnimation Storyboard.TargetName="rt" Storyboard.TargetProperty="Angle"
66. Duration="0:0:5" From="0" To="720"/>
67. <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleX"
68. Duration="0:0:5" From="1" To="0.3"/>
69. <DoubleAnimation Storyboard.TargetName="sct" Storyboard.TargetProperty="ScaleY"
70. Duration="0:0:5" From="1" To="0.1"/>
71. </Storyboard>
72. </Window.Resources>
73. </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按钮时播放关闭动画，当动画结束时，才把窗口真正关掉。

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. void MainWindow_Loaded(object sender, RoutedEventArgs e)
20. {
21. stdStart.Begin();
22. }
23. private void onClick(object sender, RoutedEventArgs e)
24. {
25. stdEnd.Begin();
26. }
27. private void onLDown(object sender, MouseButtonEventArgs e)
28. {
29. this.DragMove();
30. e.Handled = true;
31. }
32. private void onMin(object sender, RoutedEventArgs e)
33. {
34. this.WindowState = System.Windows.WindowState.Minimized;
35. }
36. }

    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;
        }
    }

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

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

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

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