上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程。 而Silverlight动画分类两种类型,From/To/By 动画关键帧动画。 对于Silverlight动画设计,StoryBoard是非常重要的一个功能,StoryBoard不仅仅可以对动画的管理,而且还可以对动画的细节进行控制,例如控制动画的播放,暂停,停止以及跳转动画位置等。 为了简化开发人员和设计人员的设计过程,Blend提供了专门的工具对StoryBoard进行设计和管理,通过该工具可以让设计人员和开发人员轻松的完成一个Silverlight动画设计,甚至不用编写一句代码。本篇将介绍如何在Blend中使用StoryBoard设计动画。

从上文我们知道,Silverlight动画类型分两种,From/To/By 动画关键帧动画。需要注意的是Blend使用StoryBoard设计动画仅能支持设计和管理关键帧动画。下面使用一个简单的实例来讲述StoryBoard在Blend中的使用方法。

描述实例:我们想实现一个简单的Image控件移动过程,Silverlight页面运行后,控件会按照指定轨迹移动。

首先建立一个演示项目,StoryBoardDemo。

项目创建完毕后,在Blend设计窗口左边有一个Tab,“Objects and Timeline”对象和时间线,从字面意思也能看得出,是设计动画的选项,

选中“Objects and Timeline”,在设计窗口可以看到,新创建的UserControl中只有一个LayoutRoot布局控件。

现在,我们添加一个新的Image控件,选中新添加的Image控件,从右边Properties属性栏,指定图片来源。

Image控件创建后,在Objects and Timeline中会看到LayoutRoot下添加了新控件。

从上面可以看出,当前控件“No StoryBoard open”,也就是说没有任何动画效果,我们开始创建一个新的StoryBoard,

选择“New”新建一个StoryBoard,命名为"myFirstStoryboard"

点击“Ok”后,Objects and Timeline编辑框将载入刚刚创建的StoryBoard,在右边出现了动画控制按钮,关键帧设置按钮以及时间线显示面板。

而在设计主窗口,会看到一个红色框,这代表着控件处于动画录制状态。

在红色框左上角,有提示信息,“myFirstStoryboard timeline recording is on”,点击前面红色按钮可以切换动画录制开关“on/off”,默认使用ON

完成上面的步骤,也就完成了最简单的StoryBoard定义,下面,我们将创建Image控件动画。

在Objects and Timeline中选择Image控件,在时间线面板中,每个对象会对应着一条阴影线,选中Image控件后,以下操作将仅对Image控件有效。

在黄色进程线为“0:00:00”的位置,点击添加一个KeyFrame关键帧,

然后移动黄色进程线到“0:01:000”位置,

回到主设计页面,当前Image控件状态是被选中的,直接拖动Image控件到任意要移动的位置,在设计页面会出现移动轨迹。

创建移动轨迹后,回到Objects and Timeline时间线设计面板,会发现新的关键帧在“0:01:000”位置已经创建,而从“0:00:00”到“0:01:000”出现一条浅灰色的连接线。

到此,一个简单的动画已经创建,点击播放按钮,即可看到动画效果,Image控件,按照刚才设定的轨迹移动。

随后,我们可以按照以上步骤快速的多添加几个关键帧,让Image控件按照不同轨迹移动。

一个简单的动画效果完成了。下面我们在Objects and Timeline中,选中myFirstStoryboard,看看右边Properties属性栏,

在属性栏中,有“Common Properties”,常规属性,其中AutoReverse是自动反序运行。RepeatBehavior是动画重复播放次数。

当你选中AutoReverse后,运行动画,会发现Image控件正序移动完,会自动反序移动直到起点。而设置RepeatBehavior将改变动画播放的次数。

Storyboard的动画快速入门暂时介绍到这里了,下篇将使用新的实例介绍StoryBoard的强大功能。

欢迎各位加入专注Silverlight技术QQ群:超级群37891947,22308706,100844510 一起讨论学习Silverlight技术。

源代码下载

转自:http://www.cnblogs.com/jv9/archive/2010/03/30/1700187.html

[转]Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard的更多相关文章

  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实例中文教程(8) - 动画设计快速入门StoryBoard

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

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

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

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

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

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

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

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

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

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

    Visual State Manager,中文又称视觉状态管理器(简称为VSM),是Silverlight 2中引进的一个概念.通过使用VSM,开发人员和设计人员可以轻松的改变项目控件的视觉效果,在项 ...

  8. Expression Blend实例中文教程(2) - 界面快速入门

    上一篇主要介绍Expression系列产品,另外概述了Blend的强大功能,本篇将用Blend 3创建一个新Silverlight项目,通过创建的过程,对Blend进行快速入门学习. 在开始使用Ble ...

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

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

随机推荐

  1. TCP三次握手形象理解

    tcp三次握手就像是你用企业微信给人家发信息,首先你得确认别人在不在,你会发  在吗?  这个时候显示的是未读   对方看到之后未读会变成已读 然后他会回复你  在的    你看到这个消息后,他那边也 ...

  2. Java Collection - HashMap

    HashMap源码解析 java.util.HashMap 类 https://www.cnblogs.com/ysocean/p/8711071.html HashMap线程不安全的原因 https ...

  3. 区别 |峰度(Kurtosis)和偏度(Skewness)

      峰度(Kurtosis) 定义 峰度又称峰态系数,表征概率密度分布曲线在平均值处峰值高低的特征数,即是描述总体中所有取值分布形态陡缓程度的统计量.直观看来,峰度反映了峰部的尖度.这个统计量需要与正 ...

  4. flask中abort()函数的使用

    一.介绍 #从flask中导入abort from flask import abort abort()函数的作用 可以让开发者在检测到web访问错误时,立即将错误信息返回回去,返回的错误码必须是已知 ...

  5. Android NDK应用原理

    转:http://shihongzhi.com/ndk/ 那么首先看一下Android的系统框架: 最底层是Linux Kernel,然后上面是封装的库及Android runtime.再上面是App ...

  6. #define SYSTEMSERVICE(_func) KeServiceDescriptorTable.ServiceTableBase[ *(PULONG)((PUCHAR)_func+1) 这

    这个跟KeServiceDescriptorTable的结构有关 下面是KeServiceDescriptorTable的结构定义 KeServiceDescriptorTabletypedef st ...

  7. socket2里面,有些函数带WSA开头,有些不带。请问有何区别?

    WSASocket可以使用WinSock特有功能,比如重叠IO,用dwflags指定.    WSA的A是指api,用于区别spi,因为在spi中还有wspsocket,wspaccept等... 在 ...

  8. 《DSP using MATLAB》Problem 8.37

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  9. 第三篇:异步请求遇上for循环怎么做

    场景:读取Excel数据(地名),发送请求到百度地图,从返回的json格式数据取出坐标数据(逗号隔开的两个float型数值),拼接成了分号隔开的一个字符串data,接下来需要利用“百度坐标转换API” ...

  10. <随便写>同步,异步进程池,线程

    from multiprocessing import Pool import time import os def work(n): print("%s run" % os.ge ...