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

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

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

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

    源代码我随后上传到资源区。
  • 相关阅读:
    mongoDB－－1 概念
    PythonWeb-Django框架学习-Demo2-创建你的小WEB应用
    PythonWeb-Django框架学习-Demo1-快速搭建项目
    Python--Demo18--异步IO之协程
    Python--Demo17--WEB应用程序之模板和MVC
    Python--Demo16--WEB应用程序之框架的好处
    Python--Demo15--WEB应用程序WGSI接口
    快速了解HTTP协议
    Python--Demo14--正则表达式
    Python--Demo13--高级特性匿名函数、推导式、迭代器、生成器
  • 原文地址：https://www.cnblogs.com/qq260250932/p/4114948.html
Copyright © 2020-2023  润新知