Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard-阿里云开发者社区

开发者社区> 技术小牛人> 正文

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

简介:
+关注继续查看
上一篇,介绍了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技术。
 

本文转自 

冷秋寒51CTO博客,原文链接:http://blog.51cto.com/kevinfan/289332 ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
phpmailer中文语言文件及使用
 phpmailer是一个国际化的软件,它也支持中文的出错提示。         phpmailer的语言文件放在language文件夹下,以phpmailer.lang- 语言类型.php命名。
526 0
jQuery EasyUI API 中文文档 - 日历(Calendar)
Calendar 日历 用 $.fn.calendar.defaults 重写了 defaults。 用法 1. 1. $('#cc').calendar({   2.     width:600,   3.     height:600,   4.     current:new Date()   5. });  特性 名称 类型 说明 默认值 width number 日历组件的宽度。
582 0
Directx11教程(46) alpha blend(3)
现在我们尝试改变box的贴图,使用一张带alpha的dds文件wirefence.dds, 用directx texture tool打开文件界面如下:       实际上,这幅图中一些像素有alpha值,一些像素alpha值为0,我们点击View-alpha channel only,可以看到下面的图,其中黑色部分的alpha值为0:      现在我们把这幅图贴到box上,程序运行效果如下: 我们在lighttex.ps中增加以下代码,需要注意clip函数的使用。
683 0
Directx11教程(47) alpha blend(4)-雾的实现
除了用来实现透明效果之外,我们还可以用alpha blend来实现雾(fog)的效果。通过逐渐清晰的雾气效果,可以增加场景的真实感。      雾的效果实现很简单,首先我们要一种颜色来表示雾,通常使用用灰色。
733 0
菜鸟入门【ASP.NET Core】12:JWT 设计解析及定制
前言 上一节我们讲述的书如何使用jwt token,而且上一节的token是要加Authorization:bearer XXXXXXXXXXXX才能访问。 这一节我们来研究如何自定义类似jwt的token验证,也就是说直接从header中拿取我们想要的token 自己定制JWT 首先,继续在上一节的JwtAuthSample项目中的Startup.
1799 0
Oracle 一个中文汉字 占用几个字节,由Oracle中字符集编码决定
Oracle 一个中文汉字 占用几个字节,要根据Oracle中字符集编码决定 查看oracle server端字符集 select userenv('language') from dual; 如果显示如下,一个汉字占用两个字节 SIMPLIFIED CHINESE_CHINA.
1059 0
深度剖析阿里云ECS最强计算实例
日前,阿里云在2017云栖大会·深圳峰会上宣布,华北3地域超大规模数据中心正式对外开放运营,云服务器ECS全系列降价20%。首次披露阿里云十余种基于最新平台计算实例背后的那些研发秘密。
11024 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载