Expression Blend实例动画-大坝水位升高演示
原文:Expression Blend实例动画-大坝水位升高演示
Expression Blend是个很强大的东西,用它可以完成很多不好做的动画效果。
动画的主要元素:
时间线(Timeline) :定义了值随着时间的变化方式。有不同类型的时间线,可用于改变不同类型的值。所以时间线的基类都是Timeline。为了连续改变double,可以使用DoubleAnimation类。
Timeline的主要属性
AutoReverse :使用该属性,可以指定连续改变的值在动画结束后是否返回初始值。
SpeedRatio:使用该属性,可以改变动画的执行速度。在这个属性中,可以定义父子元素的相对关系。默认值为1,将速率设为较小的值时,动画的执行速度较慢。
BeginTime:使用该属性,可以指定从触发事件开始到动画开始之间的长度。
Duration:指定动画执行一次的时间长度。
RepeatBehavior:定义动画重复的次数或重复的时间。
FillBehavior:如果父元素的时间线有不同的持续时间,则FillBehavior属性就很重要。
关于更多的Timeline类的属性可以参考?MSDN:http://msdn.microsoft.com/zh-cn/library/system.windows.media.animation.timeline_properties%28VS.85%29.aspx
情景板(Storyboard) :用于合并动画。Storyboard类派生子基类TimelineGroup,TimelineGroup又派生自基类Timeline。
情景板或者故事板继承自基类Timeline,但是可以包含几个时间线。StoryBoard类可以用于控制时间线。
StoryBoard类的主要方法如下:
Begin():启动与情景板相关的动画
BeginAnimation():可以为一个依赖属性启动单个动画
CreateClock():返回一个Clock对象,用于控制动画
Pause()、Resume():暂停、恢复动画
Seek():使动画移动到指定的时间处
Stop():停止动画
触发器(Trigger) :通过触发器可以启动和停止动画。
我这里用vs2013自带的Blend工具来制作一个简单的大坝水位升高的动画演示:
1.打开Blend后新建一个Wpf项目:
2.用左侧的“笔”工具画出所需要的大坝及湖泊的大概形状出来,用label或者textbox控件加入相应的文字信息,然后可以填充一下自己需要的颜色:
3.在对象菜单栏下面选择“新建”按钮,新建一个StoryBoard,击“Ok”后,Objects
and Timeline编辑框将载入刚刚创建的StoryBoard,在右边出现了动画控制按钮,关键帧设置按钮以及时间线显示面板。
4.在设计主窗口,会看到一个红色框,这代表着控件处于动画录制状态:
5.在黄色进程线为“0:00:00”的位置,点击添加一个KeyFrame关键帧:
6.移动黄色进程线到“0:01:000”位置:
7.最后拖动湖泊这个梯形向上拉即可:

8.如果想一直循环运行或者规定次数的话,可以在属性进行设置,选择AutoReverse和RepeatBehavior:
9.运行后效果如图:

Expression Blend实例动画-大坝水位升高演示的更多相关文章
- Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard http://silverlightchina.net/html/tips/2010/0329/934.html
Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard 时间:2010-03-29 11:13来源:SilverlightChina.Net 作者:jv9 点击: ...
- Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(VSM)
Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(V 时间:2010-04-12 16:06来源:SilverlightChina. ...
- Expression Blend实例中文教程系列
Expression Blend实例中文教程系列 本系列文章均转载:银光中国 时间:2010-04-09 09:20责任编辑:银光中国网 点击:次 Expression Blend实例中文教程系列由C ...
- Expression Blend学习动画基础
原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化.最常见的是flash的动画,还有GIF动态图片. 动画的主要元素 时 ...
- Expression Blend实例中文教程(9) - 行为快速入门Behaviors
在Blend强大的设计功能支持下,设计人员和开发人员可以无代码实现Silverlight/WPF动画效果,例如上文介绍的StoryBoard,就是一个典型例子,设计人员和开发人员仅需提供必要元素,即可 ...
- Expression Blend实例中文教程(1) - 开篇
随着计算机软件开发分工细节化,微软对已有的产品线进行了调整,在保持原有经典开发工具Visual Studio基础上,又推出了一套新的设计开发工具系列,Expression Studio. Expres ...
- Expression Blend实例中文教程(10) - 缓冲动画快速入门Easing
随着Rich Internet application(RIA)应用技术的发展,各个公司越来越注重于项目的用户体验性,在保证其功能完善,运行稳定的基础上,绚丽的UI和人性化的操作设计会给用户带来舒适的 ...
- Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard
上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/T ...
- Expression Blend实例中文教程(7) - 动画基础快速入门Animation
通过前面文章学习,已经对Blend的开发界面,以及控件有了初步的认识.本文将讲述Blend的一个核心功能,动画设计.大家也许注意到,从开篇到现在,所有的文章都是属于快速入门,是因为这些文章,都是我曾经 ...
随机推荐
- java.sql.SQLException:Column count doesn't match value count at row 1
1.错误描写叙述 java.sql.SQLException:Column count doesn't match value count at row 1 2.错误原因 在插入数据时,插入的 ...
- 小强的HTML5移动开发之路(52)——jquerymobile中的触控交互
当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧 ...
- 用DOM4J包实现对xml文件按属性分离。
转自本人博客:http://www.xgezhang.com/dom4j_xml_separata.html dom4j是一个Java的XML API.类似于jdom.用来读写XML文件的. dom4 ...
- JS类型转换规则详解
JS类型转换规则详解 一.总结 一句话总结:JS强制类型转换中的类型名强制类型转换和其它语言不同,是类型类的构造方法,Number(mix) 一句话总结(JS类型本质):因为js是弱类型语言,所以它相 ...
- js时间和时间戳之间如何转换(汇总)
js时间和时间戳之间如何转换(汇总) 一.总结 一句话总结: 1.js中通过new Date()来获取时间对象, 2.这个时间对象可以通过getTime()方法获取时间戳, 3.也可以通过getYea ...
- 验证redis的快照和AOF
http://blog.csdn.net/lichangzai/article/details/8692103 redis持久化简介: redis是一个支持持久化的内存数据库,也就是说redis需要经 ...
- jQuery树形菜单,使用zTree插件,异步载入 & 编辑功能&Check 共存
一.下载zTree插件 地址:http://www.ztree.me 二.HTML代码 <%@ Page Language="C#" AutoEventWireup=&quo ...
- HDU 1080 Human Gene Functions - 最长公共子序列(变形)
传送门 题目大意: 将两个字符串对齐(只包含ACGT,可以用'-'占位),按照对齐分数表(参见题目)来计算最后的分数之和,输出最大的和. 例如:AGTGATG 和 GTTAG ,对齐后就是(为了表达对 ...
- 复杂json解析(json里面嵌套json)
调用第三方接口,返回一堆json,我只想取得里面的某一个属性,但是返回的比较复杂,无法直接拿到属性,格式类似于这样: {"video":{"id":" ...
- 【26.67%】【codeforces 596C】Wilbur and Points
time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...