silverlight
发布时间:2022-05-04 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
概述
上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程。 而Silverlight动画分类两种类型, From/To/By 动画和 关键帧动画。 对于Silverlight动画设计,StoryBoard
是非常重要的一个功能,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,“Ob
jects and Timeline”对象和时间线,从字面意思也能看得出,是设计动画的选项,
选中“Ob
jects and Timeline”,在设计窗口可以看到,新创建的UserControl中只有
一个LayoutRoot布局控件。
现在,我们
添加一个新的Image控件,选中新
添加的Image控件,从右边Properties
属性栏,指定
图片来源。
Image控件
创建后,在Ob
jects and Timeline中会看到LayoutRoot下
添加了新控件。
从上面
可以看出,当前控件“No StoryBoard open”,也就是说没有任何动画
效果,我们开始创建
一个新的StoryBoard,
选择“New”新建
一个StoryBoard,命名为"myFirstStoryboard"
点击“Ok”后,Ob
jects and Timeline编辑框将载入刚刚创建的StoryBoard,在右边出现了动画控制按钮,关键帧设置按钮以及时间线
显示面板。
而在设计主窗口,会看到
一个红色框,
这代表着控件处于动画录制状态。
在红色框
左上角,有
提示信息,“myFirstStoryboard timeline recording is on”,点击前面红色按钮可以切换动画录制开关“on/off”,
默认使用ON
完成上面的步骤,也就完成了最简单的StoryBoard定义,下面,我们将创建Image控件动画。
在Ob
jects and Timeline中选择Image控件,在时间线面板中,每个对象会对应着一条阴影线,选中Image控件后,以下操作将仅对Image控件有效。
在黄色进程线为“0:00:00”的位置,点击
添加一个KeyFrame关键帧,
然后移动黄色进程线到“0:01:000”位置,
回到主设计
页面,当前Image控件状态是被选中的,直接拖动Image控件到任意要移动的位置,在设计
页面会出现移动轨迹。
创建移动轨迹后,回到Ob
jects and Timeline时间线设计面板,会发现新的关键帧在“0:01:000”位置已经创建,而从“0:00:00”到“0:01:000”出现一条浅灰色的连接线。
到此,
一个简单的动画已经创建,点击
![Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard](http://img.voidcn.com/vcimg/static/loading.png)
播放按钮,即可看到动画
效果,Image控件,按照刚才设定的轨迹移动。
随后,我们可以按照以上步骤
快速的多
添加几个关键帧,让Image控件按照不同轨迹移动。
一个简单的动画
效果完成了。下面我们在Ob
jects and Timeline中,选中myFirstStoryboard,看看右边Properties
属性栏,
在
属性栏中,有“Common Properties”,常规
属性,其中
AutoReverse是
自动反序运行。
RepeatBehavior是动画重复播放
次数。
当你选中
AutoReverse后,运行动画,会发现Image控件正序移动完,会
自动反序移动直到起点。而设置
RepeatBehavior将改变动画播放的
次数。
Storyboard的动画
快速入门暂时介绍到这里了,下篇将使用新的实例介绍StoryBoard的强大
功能。
欢迎各位加入专注Silverlight技术QQ群:
超级群37891947,22308706,100844510 一起讨论学习Silverlight技术。
大佬总结
以上是大佬教程为你收集整理的Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard全部内容,希望文章能够帮你解决Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。