1.介绍

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

2.传统的方式

(1).创建一个周期性触发的定时器(例如, 间隔50毫秒的刷新动作)

(2).当每次出发计时器时, 关联的事件处理程序会执行一些与界面UI元素相关的细节。(例如,改变窗体的大小)

(3).重新绘制整个界面元素。

缺点:

1.修改一个效果的时候,要比想象中复杂, 你要追加一个效果,必须编写所有的代码, 甚至变得更加复杂。

2.动画的帧率固定, 然后渲染基于基础的GDI+绘图, 并不支持显卡级别的渲染模式。

3.复杂的动画需要更复杂的代码实现, 不仅开发难, 维护更难。

3.基于属性的WPF动画

在WPF中, 动画使用了一个完全不同的模型。本质上, WPF动画只不过是在一段时间间隔内修改依赖性

属性值的一种方式。

优点:

1.一套完整的动画封装, System.Windows.Media.Aniation 空间下已经提供了多数动画类。

2.完成不同的特效, 只需要微调部分属性即可。

3.支持硬件加速。

4.基本动画

正如上面所说, 每一个动画依赖于一个依赖项属性。原理则是通过修改其属性值到达效果。

WPF所有的动画类中, 都继承于 Animatable , 该抽象类提供动画支持 , 具体看如下:

微软官方文档连接

类图如下所示:

5.示例(一个基本的收缩动画)

gif效果图, 演示可以两个动画, 一个在窗体加载时向上下张开, 一个关闭时上下向中间收缩动画。

6.代码创建

1.创建 Storyboard 对象, 用于装配子动画对象和属性信息。
2.由于控制Margin, 用到的属于 Thickness 结构的数据类型, 所以需要创建 ThicknessAnimation 对象。
3.设置 ThicknessAnimation 其子属性的参数: 动画时间、 初始值、结束值。
4.绑定其元素对象GridMain
5.绑定依赖属性 Margin
6.添加到 Storyboard 容器中
7.运行动画

            System.Windows.Media.Animation.Storyboard sb = new System.Windows.Media.Animation.Storyboard();
System.Windows.Media.Animation.ThicknessAnimation dmargin = new System.Windows.Media.Animation.ThicknessAnimation();
dmargin.Duration = new TimeSpan(, , , , );
dmargin.From = new Thickness(, , , );
dmargin.To = new Thickness(, , , );
System.Windows.Media.Animation.Storyboard.SetTarget(dmargin, GridMain);
System.Windows.Media.Animation.Storyboard.SetTargetProperty(dmargin, new PropertyPath("Margin", new object[] { }));
sb.Children.Add(dmargin);
sb.Begin();

 注: GridMain实际为xmal中 Grid窗体的 Name="GridMain"

ThicknessAnimation 属性介绍:

.Duration

Duration属性很简单, 它就是在动画开始时刻和结束时刻之间的时间间隔(时间间隔单位以毫秒、分钟、小时或者其他喜欢使用的任何单位)。Duration和TimeSpan非常类似, 并且Duration结构定义了一个隐式转换,能够根据需要将System.TimeSpan转为System.Windows.Duration。

这正是为什么下面的代码完全可以和上面的一样使用:

  dmargin.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 300));

.From

From属性用于设置初始值, 例如上例中,Margin设置为上下边距为300.

.To

To属性用于设置动画结束的值。如上中, 结束动画完成, Grid的边距则为0.

7.XAML创建动画

1.相对于代码创建动画, Xaml方式创建动画要简单的多。添加 Storyboard键 , 然后添加 hicknessAnimation键和绑定参数

<Storyboard x:Key="Loading">
<ThicknessAnimation Duration="0:0:0.3" To="" From="0,300,0,300"
Storyboard.TargetName="GridMain" Storyboard.TargetProperty="Margin" />
</Storyboard>

2.利用时间触发器, 关联启动事件, 进行动画的加载。

 <Window.Triggers>
<EventTrigger RoutedEvent="Loaded" >
<BeginStoryboard Storyboard="{StaticResource Loading}"/>
</EventTrigger>
</Window.Triggers>

剩余部分:

关闭部分动画的收缩代码实现:

            System.Windows.Media.Animation.ThicknessAnimation dmargin = new System.Windows.Media.Animation.ThicknessAnimation();
dmargin.Duration = new Duration(new TimeSpan(, , , , ));
dmargin.From = GridMain.Margin;
dmargin.To = new Thickness(, , , );
System.Windows.Media.Animation.Storyboard.SetTarget(dmargin, GridMain);
System.Windows.Media.Animation.Storyboard.SetTargetProperty(dmargin, new PropertyPath("Margin", new object[] { }));
sb.Children.Add(dmargin);

前台XAML代码的实现方式,  关闭的事件中, 绑定的TextBlock.MouseLeftButtonDown 事件, 完整代码(包含上面部分):

<Window.Resources>
<Storyboard x:Key="Loading">
<ThicknessAnimation Duration="0:0:0.3" To="" From="0,300,0,300"
Storyboard.TargetName="GridMain" Storyboard.TargetProperty="Margin" />
</Storyboard> <Storyboard x:Key="Closing">
<ThicknessAnimation FillBehavior="Stop" Duration="0:0:0.6" To="0,300,0,300" From="" Storyboard.TargetName="GridMain"
Storyboard.TargetProperty="Margin" Completed="Sb_Completed"/>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded" >
<BeginStoryboard Storyboard="{StaticResource Loading}"/>
</EventTrigger>
<EventTrigger RoutedEvent="TextBlock.MouseLeftButtonDown">
<BeginStoryboard Storyboard="{StaticResource Closing}" />
</EventTrigger>
</Window.Triggers>

WPF动画基础及实例的更多相关文章

  1. 《Programming WPF》翻译 第8章 1.动画基础

    原文:<Programming WPF>翻译 第8章 1.动画基础 动画包括在一段时间内改变用户界面的某些可见的特征,如它的大小.位置或颜色.你可以做到这一点,非常困难的通过创建一个tim ...

  2. Expression Blend学习动画基础

    原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化.最常见的是flash的动画,还有GIF动态图片. 动画的主要元素 时 ...

  3. 基础 jQuery 实例

    基础 jQuery 实例 jQuery 原则: 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 把所有 jQuery 代码置于事件处理函 ...

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

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

  5. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  6. silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发)

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

  7. silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发)

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

  8. WPF动画应用-几何图形扩散动画

    原文:WPF动画应用-几何图形扩散动画 最终效果图: 本实例中用到了DoubleAnimation和Storyboard两个类. 如果想系统学习的话可以直接点击链接看官方文档. 源码: 首先,在页面上 ...

  9. 【WPF学习】第四十八章 理解WPF动画

    在许多用户框架中(特别是WPF之前的框架,如Windows窗体和MFC),开发人员必须从头构建自己的动画系统.最常用的技术是结合使用计时器和一些自定义的绘图逻辑.WPF通过自带的基于属性的动画系统,改 ...

随机推荐

  1. 用Electron开发企业网盘(二)--分片下载

    书接上文,背景见:https://www.cnblogs.com/shawnyung/p/10060119.html HTTP请求头  Range 请求资源的部分内容(不包括响应头的大小),单位是by ...

  2. django 在非空的字段里插入现象表述

    1.char 类型设置为非空 对于字段不赋值 默认储存为''(空字符串) 2.int 类型设置为非空 对于字段不赋值 单条插入 报错        多条数据同时插入 默认设置为0

  3. mysql每个表总的索引大小

    /* 指定的数据库 每个表的索引 不包含主键索引的大小*/ ,),,),'mb') as index_size from information_schema.tables where TABLE_S ...

  4. WHU 1537 Stones I

    题目见: http://acm.whu.edu.cn/land/problem/detail?problem_id=1537 这个题相当无语,学长给的解法是:枚举取的个数k,然后对每个k贪心,取其中的 ...

  5. 如何在Google Play上通过电脑下载apk

    操作步骤: 1.首先打开翻 墙软件. 2.键入网址:http://apps.evozi.com/apk-downloader/ 3.将Google Play里apk的网址,复制到“Package na ...

  6. PostgreSQL数据库创建/删除

    方法1 - 系统命令 sudo su - postgres #切换到postgres用户(系统用户) createdb weichen #创建数据库 psql #直接訪问数据库(默认进入本地postg ...

  7. atitit. java queue 队列体系and自己定义基于数据库的队列总结o7t

    atitit. java queue 队列体系and自己定义基于数据库的队列总结o7t 1. 堵塞队列和非堵塞队列 1 2. java.util.Queue接口. 1 3. ConcurrentLin ...

  8. android中文网站

    Google Developers中国网站发布 用户评价:  / 55 差好  最后更新于 2016年12月09日 点击数:15209   我们很高兴地宣布,Google Developers 中国网 ...

  9. BZOJ 1306 DFS

    思路: 搜索就好 (注意不要枚举太多东西) //By SiriusRen #include <cstdio> using namespace std; int n,point[10],an ...

  10. Ubuntu18.04上使用LLDB调试Chromium Android C++代码。

    ###动机###Chromium Android源代码庞大且复杂.在调试器LLDB下能帮助我们更好的理解代码流程.介绍使用LLDB调试器调试android上chromium的C++代码. [1] 编译 ...