本文目录

　　前言

　　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;

        }

    }

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

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

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

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

WPF——动画的更多相关文章

  1. wpf动画概述

    http://msdn.microsoft.com/zh-cn/library/vstudio/ms752312(v=vs.100).aspx Windows Presentation Foundat ...

  2. [WPF] 动画Completed事件里获取执行该动画的UI对象

    原文:[WPF] 动画Completed事件里获取执行该动画的UI对象 昨天群里有位童鞋提出如何在动画完成事件Completed里获取到执行该动画的UI对象. WPF里动画的Completed的本身并 ...

  3. 扩展 WPF 动画类

    原文:扩展 WPF 动画类 扩展 WPF 动画类                                                                     Charles ...

  4. WPF 动画：同为控件不同命 - 简书

    原文:WPF 动画:同为控件不同命 - 简书 1. 及格与优秀 读大学的时候,有一门课的作业是用 PPT 展示. 但是我们很多同学都把 PPT 当做 Word 来用,就单纯地往里面堆文字. 大家都单纯 ...

  5. 【WPF学习笔记】[转]周银辉之WPF中的动画 && 晓风影天之wpf动画——new PropertyPath属性链

    (一)WPF中的动画 动画无疑是WPF中最吸引人的特色之一,其可以像Flash一样平滑地播放并与程序逻辑进行很好的交互.这里我们讨论一下故事板. 在WPF中我们采用Storyboard(故事板)的方式 ...

  6. WPF动画基础及实例

    1.介绍 在之前做winform中, 也做过一些动画效果, 但是整个动画都需要我们自己去编写, 利用计时器或线程去直接操作UI元素的属性, 然而在WPF中, 则是通过一种全新的基于属性的动画系统, 改 ...

  7. WPF动画结束后的行为方式

    原文:WPF动画结束后的行为方式 在WPF中可以使用Animation来完成动画功能,如移动,旋转等,最近写的一个程序需要实现控件的移动,包括自动移动和手动控制.原理很简单,就是改变控件的Margin ...

  8. silverlight，WPF动画终极攻略之番外 3D切换导航篇（Blend 4开发）

    原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发) 这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来. 1.新建一个user ...

  9. silverlight，WPF动画终极攻略之白云飘，坐车去旅游篇（Blend 4开发）

    原文:silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发) 这章有点长,所以我分成了两章.这一章主要是准备工作,差不多算美工篇吧,这章基本不会介绍多少动画效果,主要讲 ...

  10. silverlight，WPF动画终极攻略之迟来的第三章 动画整合篇（Blend 4开发）

    原文:silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发) 有个问题想请教下大家,我仿了腾讯的SL版QQ,相似度95%以上.我想写成教程教大家怎么开发出来,会不会 ...

随机推荐

  1. Docker基础学习-尚硅谷

    视频地址:链接: https://pan.baidu.com/s/15sJuEh5cVTJ7-vWSH7vffw 提取码: zf25 笔记:

  2. Bootstrap3基础 input-group-btn 按钮与输入框 横向组合

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  3. Docker 入门指南——常用命令

    前面已经介绍了 Docker 的安装方式,本文总结一下使用 Docker 的基本概念和常用命令. 基本概念 镜像 Image 镜像是一些打包好的已有的环境,可以被用来启动和创建容器 容器 Contai ...

  4. php的内核组成模块和运行原理

    php总共包括3个模块: php内核,zend引擎,php扩展层. 内核: 用于处理请求,文件流,错误处理等相关处理 zend引擎: 将源文件转换成机器语言(实际上是字节码opCode),然后再zen ...

  5. P2596 [ZJOI2006]书架

    思路 一开始写fhq-treap 感觉越写越感觉splay好些,就去splay 然后维护序列 注意前驱后继的不存在的情况 但不用插入虚拟节点(那插入岂不太麻烦) 跑的真慢的一批,splay太多了 错误 ...

  6. centos7重新调整分区大小

    As others have pointed out, XFS filesystem cannot be shrunk. So your best bet is to backup /home, re ...

  7. dfs序七个经典问题

    update-2018.07.23: 原文问题五思路描述有误,已更正. 参考自:<数据结构漫谈>-许昊然 dfs序是树在dfs先序遍历时的序列,将树形结构转化成序列问题处理. dfs有一个 ...

  8. Unity3D学习笔记（三十二）：Xlua（2）

    Xlua支持通过子类对象访问父类的变量属性和方法   对于C#的ref,out参数的方法 当调用的时候:out类型的参数是不需要传递实参的,普通的参数和ref参数需要传递实参. out,ref传出值通 ...

  9. Hive初步使用、安装MySQL 、Hive配置MetaStore、配置Hive日志《二》

    一.Hive的简单使用 基本的命令和MySQL的命令差不多 首先在 /opt/datas 下创建数据  students.txt 1001 zhangsan 1002 lisi 1003 wangwu ...

  10. Java基础 【类之间的关系】

    在Java与其他面向对象设计语言中,类之间常见的关系有6种 分别是:  依赖.关联.聚合.组合.继承.实现,他们的耦合度依次增强. 其中,关联.聚合.组合关系仅仅是在语义上有所区别,所谓语义就是指上下 ...