《动画设计与实例》word版

1、Silverlight & Blend动画设计与实例Silverlight & Blend动画设计与实例前言：2偏移动画（TranslateTransform）4旋转动画（RotateTransform）7缩放动画（ScaleTransform）11倾斜动画（SkewTransform）16故事板(StoryBoards)和动画(Animations)19动画技巧（Animation Techniques）之对象与路径转化、波感特效29模糊效果（BlurEffect）与阴影效果34拖放(Drag-Drop)操作与拖放行为38动画（Animation）与视图状态管理45坐标系统（Coordina

2、te System）与向量（Vector）运动51沿路径动画54三角函数（Trigonometry）动画之自由旋转（Free-form rotation）58三角函数（Trigonometry）动画之飘落的雪花（Falling Snow）64前言：Microsoft Expression Blend作为一款功能齐全的专业设计工具，可用来针对基于 Microsoft Windows 和基于 Microsoft Silverlight 1.0 的应用程序制作精美复杂的用户界面。Expression Blend 可让设计人员集中精力从事创作，而让开发人员集中精力从事编程工作。Expression B

3、lend 的工作原理 在 Expression Blend 中，您可以在美工板上绘制形状、路径和控件，然后修改其外观和行为，从而直观地设计应用程序。您可以导入图像、视频和声音。在基于 Windows 的应用程序中，还可以导入和更改三维对象。 您可以创建用于动态显示设计的可视元素或音频元素的 Storyboard，并可以选择在用户与应用程序进行交互时触发这些 Storyboard。在处理基于 Windows 的应用程序时，您可以重新设计已应用于基本控件的模板，使应用程序具有独特的外观和行为。 在处理应用程序时，您可以随时使用编程人员正在处理的代码隐藏文件或自定义控件文件来更新您的项目。 与 Ex

4、pression Blend 结合使用的其他工具 您可以将 Microsoft Expression Design 2 生成的图形和可扩展应用程序标记语言 (XAML) 资源导入到 Expression Blend 2 项目中。您还可以导入在 Microsoft Expression Encoder 2 中创建的 Silverlight 1.0 媒体项目，以将新的功能或可视元素添加到项目中，或者修改可在 Expression Encoder 2 中重用的媒体播放器模板。 您可以将 Silverlight 1.0 导入到 Microsoft Expression Web 2 项目中，以添加更多

5、Web 内容或发布站点。 Microsoft Visual Studio 2008 可以与 Expression Blend 2 完美地结合使用，以在您指定要侦听的事件时自动更新项目中的代码隐藏文件。从 Expression Blend 2 的“项目”面板中，可以打开各个代码隐藏文件或整个项目。还可以使用 Visual Studio 2008 的部署工具来部署您的应用程序。 Expression Blend 生成的内容 Expression Blend 将生成 Windows Presentation Foundation 应用程序，这意味着，所显示的设计方案是由 XAML 来表示的。正如 H

6、TML 是 Web 应用程序标记语言一样，XAML 是 Windows Presentation Foundation (WPF) 的标记语言。有关 XAML 和 WPF 的详细信息，请参阅 XAML 编辑和学习资源和社区资源。 Expression Blend 附带的功能 Expression Blend 2 包括以下功能： 全套矢量绘图工具，包括文本工具和三维 (3D) 工具； 易于使用且新颖的可视界面，带有可停靠的面板和面向对象的上下文菜单； 实时动画； 三维和媒体支持，可增强用户体验； 先进、灵活且可重用的自定义和外观选项，适用于各种常用控件； 强大的数据源和外部资源集成点； 实时的设

7、计和标记视图； 从 Expression Design 2 导入作品的功能； 从 Expression Encoder 2 导入站点的功能； 可以与 Visual Studio 2008 交互使用，从而帮助设计人员和开发人员更紧密、更有效地进行团队协作。 目标应用程序类型 Expression Blend 2 已经过优化，可以生成以下类型的应用程序： 生产类应用程序 有助于提高广大客户的生产力及效率的应用程序以及行业应用程序，如 Microsoft Office。 消费类应用程序 媒体播放器、安全工具和桌面小工具等应用程序。 游戏 简单的娱乐性桌面或联机游戏。 信息查询终端 在信息查询终端上运

8、行的应用程序，用户可与其交互以获取信息、查看产品目录、在机场办理登机手续等。 IT 专业工具 专门针对特定的公司或客户需要执行小型作业的工具（如错误跟踪工具）。 最佳实践 有些设计创意非常好，因为它们能够提高易用性。下面是一些借助 Expression Blend 2 和 Microsoft .NET Framework 3.5 提高易用性的常用方法： 按照现实世界建模： 可以使用自定义的可视效果和交互功能，使特定控件的外观和行为均与其现实世界的对应物类似。如果用户熟悉现实世界的对象并且现实世界的方法是完成该任务的最佳、最有效方法，这种技术就是最佳选择。例如，简单的工具（如计算器）按照现实世界

9、的对应物进行建模就很有效。 展示而不是解释： 可以使用动画和过渡来展示关系、原因和效果。此技术最适用于提供需要通过额外的文字来解释内容以免用户误解的信息。例如，幼儿书籍可以动态显示翻页，以展示控件的工作方式。 提高功能可见性： 功能可见性是指对象直观表明其使用方式的特性（而不是使用标签来解释）。可以使用自定义控件的可视效果和动画功能，直观表明如何使用非标准的控件。 使用自然对应： 自然对应是用户要完成的任务与完成任务的方法之间的一种清晰联系。在标准的常用控件不能提供自然对应时，可以使用自定义外观和交互功能来建立自然对应。 降低知识门槛： 可以使用自定义交互功能，限制执行某项操作的方式并降低执行

10、某项任务所需的知识门槛。 改进反馈： 可以使用自定义控件的可视效果和动画功能来提供反馈，以显示用户的操作是否正确或者显示操作进度。例如，Windows Vista 的 Internet Explorer 中的地址栏会在背景中显示加载页面的进度。 使对象更容易交互: 称为费茨法则的人类动作模型指出，单击目标所需的努力与目标的距离成正比，而与目标的大小成反比。例如，可以使用动画使得指针在靠近对象时变大，而在远离对象时变小。这样做，就更容易单击对象。此外，还可使对象变小，从而更有效地利用屏幕空间。 聚焦： 可以使用丰富的布局和自定义可视效果，突出显示任务必需的屏幕元素，或者淡化次要元素。 Expre

11、ssion Blend 3 Plus SketchFlow：设计与构建桌面和Web程序的视觉化工具。现已有RC候选版可下载。偏移动画（TranslateTransform）用户界面组件、图像元素和多媒体功能可以让我们的界面生动活泼，除此之外， Silverlight还具备动画功能，它可以让应用程序“动起来”。实际上，英文中Animation这 个单词的意思是给某物带来生命。在界面中添加动画效果，给人以印象深刻可视化提示，可 以让用户的注意力集中到我们想让他们关注的地方。动画主要是通过计时器来完成，在Silverlight中开发动画程序通常是使用微软主推的设 计工具Microsoft Expre

12、ssion Blend，Silverlight 中提供了优秀的动画系统，我们可以通 过Microsoft Expression Blend 快速的完成动画元素的设计制作，然后通过Visual Studio 作为编码环境进行后面的管理动画定时器和刷新用户界面的工作。当使用Microsoft Expression Blend 时，可以用拖拽的方式在时间线中进行动画的定义，这样可以很容易快速 定义负责的动画,因为 Microsoft Expression Blend 将自动生成对应的XAML代码。Silverlight中的偏移动画和Flash中的补间动画基本一样，其实很好理解，也就是一个动 画元素（

13、组件）从一个位置移动到另一个位置，这个过着中有三个关键点：动画起点、动画 终点和动画时间。这三点可以理解为一个动画元素从始点坐标向终点坐标偏移的缓冲时间是 多少。当我们定义好了动画元素后，可以直接通过Blend中的对象和时间线面板来为动画元素添 加动画容器时间线（Storyboard），如下图所示：当动画容器时间线创建好后，只需要选中需要进行创建动画的元素，然后再属性面板下进 行可视化属性设置就可以完成动画的创建，如下图示为创建元素darkMoon的偏移动画。通过上面的一系列操作设置后切换到XAML视图，可以发现在XAML编码文件里Blend自动生 成了如下代码片段，其作用就是为名为“dark

14、Moon”的动画元素创建两个方向（X,Y）的偏移 动画。 上图为 动画执行过程截图，在某些情况下要实现一些动画效果是不能预先确定的，这就需要在程序 编码中去动态的创建动画效果。使用Blend进行动画设计是非常简单的，尤其是对Adobe Flash熟悉的人员，其实在程序编码中使用程序创建动画也一样的简单，相比之下只是需要人 为的去编写很多的程序代码，另外就是通过程序代码动态的创建动画效果需要开发人员对 Silverlight的动画框架非常熟悉，只有在熟练应用Silverlight动画框架所提供的动画接口 的情况下才能够和使用 Blend设计动画一样随心应手实现各种不同的动画效果。编写 程序代码创

15、建动画其实也是非常简单的，只要理清了思路和熟练应用Silverlight的动画框架 提供的编程接口就可以完成动画的开发。首先需要弄清楚动画容器时间线、动画动作、动画类型、动 画效果等基本概念。就以本篇的示例来分析，通过程序动态的创建动画效果的代码如下：/创建动画/ privatevoidCreateStoryboard()/元 素当前所在的坐标点PointcurrentPoint=newPoint (Canvas.GetLeft(darkMoon),Canvas.GetTop(darkMoon);/目标点坐int 标Pointpoint=newPoint(280,-245);/创建动画 容器时

16、间线Storyboardstoryboard=newStoryboard(); DoubleAnimationdoubleAnimation=newDoubleAnimation();/创 建X轴方向动画doubleAnimation.From=currentPoint.X; doubleAnimation.To=point.X;doubleAnimation.Duration=new Duration(newTimeSpan(0,0,1);Storyboard.SetTarget (doubleAnimation,darkMoon);Storyboard.SetTargetProperty

17、(doubleAnimation,newPropertyPath (UIElement.RenderTransform).(TransformGroup.Children)3. (TranslateTransform.X);storyboard.Children.Add (doubleAnimation);/创建Y轴方向动画doubleAnimation= newDoubleAnimation();doubleAnimation.SetValue (DoubleAnimation.FromProperty,currentPoint.Y); doubleAnimation.SetValue(Do

18、ubleAnimation.ToProperty,point.Y); doubleAnimation.SetValue(DoubleAnimation.DurationProperty,newDuration(new TimeSpan(0,0,1);Storyboard.SetTarget(doubleAnimation, darkMoon);Storyboard.SetTargetProperty(doubleAnimation, newPropertyPath(UIElement.RenderTransform). (TransformGroup.Children)3.(Translate

19、Transform.Y); storyboard.Children.Add(doubleAnimation);storyboard.Begin();旋转动画（RotateTransform）Silverlight的基础动画包括偏移、旋转、缩放、倾斜和翻转动画，这些基础动画毫无疑 问是在Silverlight中使用得最多的动画效果，其使用也是非常简单的。相信看过上一篇偏 移动画（TranslateTransform）文章的朋友大多数对Silverlight & Blend动画设计已 经产生了莫大的兴趣，本篇将继续介绍Silverlight中的基础动画之旋转动画 （RotateTransform）

20、。所谓旋转动画（RotateTransform）也就是一个元素以一个坐标点为旋转中心点旋转，在 使用旋转动画（RotateTransform）的时候需要注意的有两点：旋转中心点（Center）和旋转 角度(Angle)。同样当我们设计好动画元素后要为其创建动画效果，首先得添加动画容器时间 线（Storyboard），直接在Blend设计界面既可完成该操作。如下图所示：当动画容器时间线创建好后，只需要选中需要进行创建动画的元素，然后再属性面板下进 行可视化属性设置就可以完成动画的创建，转到“转换”属性面板，然后选择“旋转”，可 以看到如下图所示的属性设置面板。如上图示，将动画旋转角度(Angle

21、)设置为了360，这表示动画作用元素将以旋转中心坐标 进行旋转360度。此时切换到XAML编码视图可以发现Blend自动生成了如下动画代码块： 执行这个旋转动画可以看到效果，名为“fan”的元素将在一秒钟内旋转360度。同样也可 以通过编程的方式来动态的创建该旋转动画，详细如下代码块：privatevoidCreateStoryboard() /创建动画容器时间线 Storyboardstoryboard=newStoryboard(); /创建旋转动画 DoubleAnimationdoubleAnimation=newDoubleAnimation(); doubleAnimation.T

22、o=360; doubleAnimation.Duration=newDuration(newTimeSpan(0,0, 1); Storyboard.SetTarget(doubleAnimation,fan); Storyboard.SetTargetProperty(doubleAnimation, newPropertyPath(UIElement.RenderTransform). (TransformGroup.Children)2.(RotateTransform.Angle); storyboard.Children.Add(doubleAnimation); storyboa

23、rd.Begin();或许有人会问，旋转动画我该怎么去用，什么样的场景适合使用旋转动画？其实很多地方 都可以使用旋转动画，比如游戏中的地图场景中的风车，实际上也就是一个旋转动画效果， 旋转动画下面是一条线作为风车的柱子。我们直接在本文的示例项目中加入一条竖线，线的 一端对应于旋转动画的中心，通过Blend 设计后动态生成的XAML编码如下： 注意上面设置ZIndex值是为了将线条呈现到旋转动画的后面去，这样给人一种旋转动画是 在线条的一端不停的选择，看起就像是一个风车在旋转一样，实际上就是一种视觉欺骗，记 得我一个做3D游戏开发的朋友给我说过，3D游戏里的大多数效果全都是视觉欺骗，嘎嘎 ,OK

24、,现在运行动画的效果则如下截图：这样的效果貌似不好看，我们可以为其他加入背景图片进行装饰，根据背景图片进行调整 适当的位置、元素颜色、形状等，以更为真实的效果呈现在用户面前。具体的调整过程这里 就不作过多的介绍，给个上了背景的截图演示下吧：缩放动画（ScaleTransform）在Silverlight的动画框架中，ScaleTransform类提供了在二维空间中的坐标内进行缩放 操作，通过 ScaleTransform可以在水平或垂直方向的缩放和拉伸对象，以实现一个简单的缩 放动画效果，故此我将其称为缩放动画（ScaleTransform）。使用ScaleTransform需要特别 关注的有

25、两点：中心点坐标和X、Y轴方向的缩放比例，比例值越小则对象元素就越小（既收 缩），比例值越大则对象元素就越大（既呈现为放大效果）。Blend对Silverlight里的动画设计支持非常强大，同偏移动画、旋转动画一样简单，要实 现缩放动画也只需要对设计好的动画元素进行简单的设计就能完成动画效果的创建。通过创建动画容器时间线后，如上图进行动画效果属性的设置，Blend便会生成相应的动 画编码在XAML文件里，详见如下代码块： 任何一个元素对象，其缩放动画（ScaleTransform）的默认值为（1，1），既保持元素原 样不变。如前面所说，比例值越小则对象元素就越小（既收缩），比例值越大则对象元素

26、就 越大（既呈现为放大效果）。如上示例就是将缩放比例值设置的0.15，其运行效果如下图所 示：如果上图动画效果使用程序编码去实现，同样的也是很简单的，主要就是利用动画根据时 间去控制对象的ScaleTransform变换效果的ScaleX和ScaleY值，详细如下：/创建对象truck的缩放动画，3秒钟从原始大小缩放到15%的大小/publicvoidCreateStoryboard() /创建动画容器时间线 Storyboardstoryboard=newStoryboard(); /创建X轴方向的缩放动画,设置对象缩放到0.15,置对象缩放缓存时间为3秒 DoubleAnimationdo

27、ubleAnimation=newDoubleAnimation(); doubleAnimation.To=0.15; doubleAnimation.Duration=newDuration(newTimeSpan(0,0, 3); Storyboard.SetTarget(doubleAnimation,truck); Storyboard.SetTargetProperty(doubleAnimation, newPropertyPath(UIElement.RenderTransform). (TransformGroup.Children)0.(ScaleTransform.Sca

28、leX); storyboard.Children.Add(doubleAnimation); /创建Y轴方向的缩放动画,设置对象缩放到0.15,置对象缩放缓存时间为3秒 doubleAnimation=newDoubleAnimation(); doubleAnimation.SetValue(DoubleAnimation.ToProperty,0.15); doubleAnimation.SetValue(DoubleAnimation.DurationProperty,new Duration(newTimeSpan(0,0,3); Storyboard.SetTarget(doubl

29、eAnimation,truck); Storyboard.SetTargetProperty(doubleAnimation, newPropertyPath(UIElement.RenderTransform). (TransformGroup.Children)0.(ScaleTransform.ScaleY); storyboard.Children.Add(doubleAnimation); storyboard.Begin();如上示例，如果将移动的对象换成一个“车”，执行动画的时候就感觉是一辆车在马路上 行驶了。缩放动画（ScaleTransform）在平时的开发中非常适用，不如

30、界面上有一个组件， 默认为缩放一半显示，当用户的鼠标指向它的时候将对象放大到正常比例（x,y=1,1）显 示，鼠标离开的时候将对象恢复到默认大小（x,y=0.5,0.5），此时就可以使用缩放动画 （ScaleTransform）去实现。 ellipse.MouseEnter+=(mes,mee)= Storyboardstoryboard=newStoryboard(); DoubleAnimationdoubleAnimation=newDoubleAnimation (); doubleAnimation.To=1; doubleAnimation.Duration=newDuration

31、 (TimeSpan.FromMilliseconds(300); Storyboard.SetTarget(doubleAnimation,ellipse); Storyboard.SetTargetProperty(doubleAnimation, newPropertyPath(UIElement.RenderTransform). (TransformGroup.Children)0.(ScaleTransform.ScaleX); storyboard.Children.Add(doubleAnimation); doubleAnimation=newDoubleAnimation(

32、); doubleAnimation.To=1; doubleAnimation.Duration=newDuration (TimeSpan.FromMilliseconds(300); Storyboard.SetTarget(doubleAnimation,ellipse); Storyboard.SetTargetProperty(doubleAnimation, newPropertyPath(UIElement.RenderTransform). (TransformGroup.Children)0.(ScaleTransform.ScaleY); storyboard.Child

33、ren.Add(doubleAnimation); storyboard.Begin(); ;ellipse.MouseLeave+=(mls,mle)= Storyboardstoryboard=newStoryboard(); DoubleAnimationdoubleAnimation=newDoubleAnimation (); doubleAnimation.To=0.5; doubleAnimation.Duration=newDuration (TimeSpan.FromMilliseconds(300); Storyboard.SetTarget(doubleAnimation

34、,ellipse); Storyboard.SetTargetProperty(doubleAnimation, newPropertyPath(UIElement.RenderTransform). (TransformGroup.Children)0.(ScaleTransform.ScaleX); storyboard.Children.Add(doubleAnimation); doubleAnimation=newDoubleAnimation(); doubleAnimation.To=0.5; doubleAnimation.Duration=newDuration (TimeS

35、pan.FromMilliseconds(300); Storyboard.SetTarget(doubleAnimation,ellipse); Storyboard.SetTargetProperty(doubleAnimation, newPropertyPath(UIElement.RenderTransform). (TransformGroup.Children)0.(ScaleTransform.ScaleY); storyboard.Children.Add(doubleAnimation); storyboard.Begin(); ;PS:上面代码块仅是为了掩饰缩放动画（Sc

36、aleTransform）的使用，如果真要实现圆形对 象的鼠标指向放大，移开恢复原状的效果只需要直接设置其宽度（Width）和高度（Height） 属性就可以了。倾斜动画（SkewTransform）Silverlight中的倾斜变化动画（SkewTransform）能够实现对象元素的水平、垂直方向的 倾斜变化动画效果。我们现实生活中的倾斜变化效果是非常常见的，比如翻书的纸张效果， 关门开门的时候门缝图形倾斜变换。在Silverlight中实现一个倾斜变化的动画效果是非常简 单的，如果利用Blend这种强大的设计工具来实现那更是锦上添花。倾斜效果的动画应用效果其实非常好看，使用倾斜变换需要注意

37、的有两点：倾斜方向和倾 斜中心点。可以以某点为倾斜中心点进行X或Y坐标方向进行倾斜，如下以默认中心店进行的 各种不同程度倾斜的简单示例： 如果使 用Blend来设计倾斜效果的变换动画就非常简单了，只需要在属性面板里设置相关的实现就可 以完成整个倾斜变换动画的设计，如下绘制了一扇门并为其设置开门的效果，开门的时候门 缝间的呈现效果就是以倾斜变换的效果实现的：查看XAML文件可以发现，Blend生成了如下代码，用于实现开门的效果，需要注意的是这 里应用到了倾斜中心点，们是朝一个方向（X）开关，其呈现的倾斜效果就是Y坐标方向的倾 斜变换。如上图所示，设置了Y坐标方向倾斜-17，既形成门向水平下方向倾斜效果。 故事板(StoryBoards)和动画(Animations)正如你所看到的，Blend是一个非常强大的节约时间的设计工具，在Blend下能够设计出很 多满意的动画作品，或许他具体是怎么实现的，通过什么方式实现的我们还是一无所知。本 篇将续前面几篇基础动画之上，详细介绍Silverlight里提供故事板（StoryBorard