Welcome

首页 / 软件开发 / Silverlight / Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)

Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)2011-04-20 博客园 Beniao用户界面组件、图像元素和多媒体功能可以让我们的界面生动活泼,除此之外, Silverlight还具备动画功能,它可以让应用程序“动起来”。实际上,英文中Animation这 个单词的意思是给某物带来生命。在界面中添加动画效果,给人以印象深刻可视化提示,可 以让用户的注意力集中到我们想让他们关注的地方。

动画主要是通过计时器来完成,在Silverlight中开发动画程序通常是使用微软主推的设 计工具Microsoft Expression Blend,Silverlight 中提供了优秀的动画系统,我们可以通 过Microsoft Expression Blend 快速的完成动画元素的设计制作,然后通过Visual Studio 作为编码环境进行后面的管理动画定时器和刷新用户界面的工作。当使用Microsoft Expression Blend 时,可以用拖拽的方式在时间线中进行动画的定义,这样可以很容易快速 定义负责的动画,因为 Microsoft Expression Blend 将自动生成对应的XAML代码。

Silverlight中的偏移动画和Flash中的补间动画基本一样,其实很好理解,也就是一个动 画元素(组件)从一个位置移动到另一个位置,这个过着中有三个关键点:动画起点、动画 终点和动画时间。这三点可以理解为一个动画元素从始点坐标向终点坐标偏移的缓冲时间是 多少。

当我们定义好了动画元素后,可以直接通过Blend中的对象和时间线面板来为动画元素添 加动画容器时间线(Storyboard),如下图所示:

当动画容器时间线创建好后,只需要选中需要进行创建动画的元素,然后再属性面板下进 行可视化属性设置就可以完成动画的创建,如下图示为创建元素darkMoon的偏移动画。