原文: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实例动画-大坝水位升高演示的更多相关文章

  1. 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 点击: ...

  2. Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(VSM)

    Expression Blend实例中文教程(11) - 视觉管理器快速入门Visual State Manager(V 时间:2010-04-12 16:06来源:SilverlightChina. ...

  3. Expression Blend实例中文教程系列

    Expression Blend实例中文教程系列 本系列文章均转载:银光中国 时间:2010-04-09 09:20责任编辑:银光中国网 点击:次 Expression Blend实例中文教程系列由C ...

  4. Expression Blend学习动画基础

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

  5. Expression Blend实例中文教程(9) - 行为快速入门Behaviors

    在Blend强大的设计功能支持下,设计人员和开发人员可以无代码实现Silverlight/WPF动画效果,例如上文介绍的StoryBoard,就是一个典型例子,设计人员和开发人员仅需提供必要元素,即可 ...

  6. Expression Blend实例中文教程(1) - 开篇

    随着计算机软件开发分工细节化,微软对已有的产品线进行了调整,在保持原有经典开发工具Visual Studio基础上,又推出了一套新的设计开发工具系列,Expression Studio. Expres ...

  7. Expression Blend实例中文教程(10) - 缓冲动画快速入门Easing

    随着Rich Internet application(RIA)应用技术的发展,各个公司越来越注重于项目的用户体验性,在保证其功能完善,运行稳定的基础上,绚丽的UI和人性化的操作设计会给用户带来舒适的 ...

  8. Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard

    上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/T ...

  9. Expression Blend实例中文教程(7) - 动画基础快速入门Animation

    通过前面文章学习,已经对Blend的开发界面,以及控件有了初步的认识.本文将讲述Blend的一个核心功能,动画设计.大家也许注意到,从开篇到现在,所有的文章都是属于快速入门,是因为这些文章,都是我曾经 ...

随机推荐

  1. 2016.3.14__CSS 定位__第六天

    假设您认为这篇文章还不错.能够去H5专题介绍中查看很多其它相关文章. CSS 定位机制 CSS中一共同拥有三种基本定位机制:普通流.浮动.绝对定位. 假设不进行专门指定.全部的标签都在普通流中定位. ...

  2. Android注冊短信验证码功能

    一.短信验证的效果是通过使用聚合数据的SDK实现的 ,效果例如以下: 二.依据前一段时间的博客中输了怎么注冊! 注冊之后找到个人中心找到申请一个应用就可以! 三.依据官方文档创建项目 官方文档API下 ...

  3. Go语言:正則表達式的使用

    Go语言的正則表達式使用非常easy.演示样例代码: package test import ( "fmt" "regexp" ) func RegixBase ...

  4. JAVA 安装JDK注意事项

    在JAVA jdk安装的时候,文件夹名称最好不要有中文,有逗号,有下划线,空格等问题.这样easy出错,比方以下几个安装路径easy出错    java文件夹/jdk1.6_x86/    这样的就是 ...

  5. NSOperationQueue小结

    将建立的线程增加队列之中.他们都是并发运行的  假设想有一个线程在另外一个线程之后再运行的话 有一个方法能够实现- (void)addDependency:(NSOperation *)op; 这一个 ...

  6. bootsrap+jquery+组件项目引入文件的常见报错

    做一个项目的时候 ,控制台总是会出现各种bug,其实不用慌张,终结起来也就几种类型的错误,在开发中每次遇到错误都善于总结,下次在看到就会胸有成竹知道是什么情况了,以下是在开发过程中总结的一些错误以及错 ...

  7. 【bzoj2453】维护队列 (分块 + 二分)

    传送门(权限题) 题目分析 题意为:求区间内有多少种不同的数,带修改. 首先对原序列分块,用last[i]表示与i相同的上一个在哪里,然后将分块后的数组每个块内的按照last进行排序,这样查询时就可以 ...

  8. 【9302】&&【a301】兔子繁殖

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 有一种兔子,出生后一个月就可以长大,然后再过一个月一对长大的兔子就可以生育一对小兔子且以后每个月都能生育一对 ...

  9. 【43.75%】【codeforces 688E】The Values You Can Make

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  10. js限制文本框input只能输入数字

    JS判断只能是数字和小数点. ,文本框只能输入数字代码(小数点也不能输入) 复制代码 代码示例:<input onkeyup="this.value=this.value.replac ...