2024年1月5日发(作者：)
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
坐标系统（Coordinate System）与向量（Vector）运动 .................................................... 51
沿路径动画 ............................................................................................................................. 54
三角函数（Trigonometry）动画之自由旋转（Free-form rotation） ................................. 58
三角函数（Trigonometry）动画之飘落的雪花（Falling Snow） ...................................... 64
第 1 页 07-20-2013
Silverlight & Blend动画设计与实例
前言：
Microsoft Expression Blend作为一款功能齐全的专业设计工具，可用来针对基于 Microsoft Windows 和基于 Microsoft Silverlight 1.0 的应用程序制作精美复杂的用户界面。Expression Blend 可让设计人员集中精力从事创作，而让开发人员集中精力从事编程工作。
Expression Blend 的工作原理
在 Expression Blend 中，您可以在美工板上绘制形状、路径和控件，然后修改其外观和行为，从而直观地设计应用程序。您可以导入图像、视频和声音。在基于 Windows 的应用程序中，还可以导入和更改三维对象。
您可以创建用于动态显示设计的可视元素或音频元素的 Storyboard，并可以选择在用户与应用程序进行交互时触发这些 Storyboard。在处理基于 Windows 的应用程序时，您可以重新设计已应用于基本控件的模板，使应用程序具有独特的外观和行为。
在处理应用程序时，您可以随时使用编程人员正在处理的代码隐藏文件或自定义控件文件来更新您的项目。
与 Expression 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 项目中，以添加更多 Web 内容或发布站点。
Microsoft Visual Studio 2008 可以与 Expression Blend 2 完美地结合使用，以在您指定要侦听的事件时自动更新项目中的代码隐藏文件。从 Expression Blend 2 的“项目”面板中，可以打开各个代码隐藏文件或整个项目。还可以使用 Visual Studio 2008 的部署工具来部署您的应用程序。
Expression Blend 生成的内容
Expression Blend 将生成 Windows Presentation Foundation 应用程序，这意味着，所显示的设计方案是由 XAML 来表示的。正如 HTML 是
Web 应用程序标记语言一样，XAML 是 Windows Presentation Foundation
(WPF) 的标记语言。有关 XAML 和 WPF 的详细信息，请参阅 XAML 编辑和学习资源和社区资源。
第 2 页 07-20-2013
Silverlight & Blend动画设计与实例
Expression Blend 附带的功能
Expression Blend 2 包括以下功能：
全套矢量绘图工具，包括文本工具和三维 (3D) 工具；
易于使用且新颖的可视界面，带有可停靠的面板和面向对象的上下文菜单；
实时动画；
三维和媒体支持，可增强用户体验；
先进、灵活且可重用的自定义和外观选项，适用于各种常用控件；
强大的数据源和外部资源集成点；
实时的设计和标记视图；
从 Expression Design 2 导入作品的功能；
从 Expression Encoder 2 导入站点的功能；
可以与 Visual Studio 2008 交互使用，从而帮助设计人员和开发人员更紧密、更有效地进行团队协作。
目标应用程序类型
Expression Blend 2 已经过优化，可以生成以下类型的应用程序：
生产类应用程序 有助于提高广大客户的生产力及效率的应用程序以及行业应用程序，如 Microsoft Office。
消费类应用程序 媒体播放器、安全工具和桌面小工具等应用程序。
游戏 简单的娱乐性桌面或联机游戏。
信息查询终端 在信息查询终端上运行的应用程序，用户可与其交互以获取信息、查看产品目录、在机场办理登机手续等。
IT 专业工具 专门针对特定的公司或客户需要执行小型作业的工具（如错误跟踪工具）。
最佳实践
有些设计创意非常好，因为它们能够提高易用性。下面是一些借助
Expression Blend 2 和 Microsoft .NET Framework 3.5 提高易用性的常用方法：
按照现实世界建模： 可以使用自定义的可视效果和交互功能，使特定控件的外观和行为均与其现实世界的对应物类似。如果用户熟悉现实世界的对象并且现实世界的方法是完成该任务的最佳、最有效方法，这种技术就是最佳选择。例如，简单的工具（如计算器）按照现实世界的对应物进行建模就很有效。
展示而不是解释： 可以使用动画和过渡来展示关系、原因和效果。此技术最适用于提供需要通过额外的文字来解释内容以免用户误解的信息。例如，幼儿书籍可以动态显示翻页，以展示控件的工作方式。
第 3 页 07-20-2013
Silverlight & Blend动画设计与实例
提高功能可见性： 功能可见性是指对象直观表明其使用方式的特性（而不是使用标签来解释）。可以使用自定义控件的可视效果和动画功能，直观表明如何使用非标准的控件。
使用自然对应： 自然对应是用户要完成的任务与完成任务的方法之间的一种清晰联系。在标准的常用控件不能提供自然对应时，可以使用自定义外观和交互功能来建立自然对应。
降低知识门槛： 可以使用自定义交互功能，限制执行某项操作的方式并降低执行某项任务所需的知识门槛。
改进反馈： 可以使用自定义控件的可视效果和动画功能来提供反馈，以显示用户的操作是否正确或者显示操作进度。例如，Windows Vista 的
Internet Explorer 中的地址栏会在背景中显示加载页面的进度。
使对象更容易交互: 称为费茨法则的人类动作模型指出，单击目标所需的努力与目标的距离成正比，而与目标的大小成反比。例如，可以使用动画使得指针在靠近对象时变大，而在远离对象时变小。这样做，就更容易单击对象。此外，还可使对象变小，从而更有效地利用屏幕空间。
聚焦： 可以使用丰富的布局和自定义可视效果，突出显示任务必需的屏幕元素，或者淡化次要元素。
Expression Blend 3 Plus SketchFlow：设计与构建桌面和Web程序的视觉化工具。现已有RC候选版可下载。
偏移动画（TranslateTransform）
用户界面组件、图像元素和多媒体功能可以让我们的界面生动活泼，除此之外，
Silverlight还具备动画功能，它可以让应用程序“动起来”。实际上，英文中Animation这 个单词的意思是给某物带来生命。在界面中添加动画效果，给人以印象深刻可视化提示，可 以让用户的注意力集中到我们想让他们关注的地方。
动画主要是通过计时器来完成，在Silverlight中开发动画程序通常是使用微软主推的设 计工具Microsoft Expression Blend，Silverlight 中提供了优秀的动画系统，我们可以通 过Microsoft Expression Blend 快速的完成动画元素的设计制作，然后通过Visual Studio 作为编码环境进行后面的管理动画定时器和刷新用户界面的工作。当使用Microsoft Expression Blend 时，可以用拖拽的方式在时间线中进行动画的定义，这样可以很容易快速 定义负责的动画,因为 Microsoft Expression Blend 将自动生成对应的XAML代码。
Silverlight中的偏移动画和Flash中的补间动画基本一样，其实很好理解，也就是一个动 画元素（组件）从一个位置移动到另一个位置，这个过着中有三个关键点：动画起点、动画 终点和动画时间。这三点可以理解为一个动画元素从始点坐标向终点坐标偏移的缓冲时间是 多少。
第 4 页 07-20-2013
Silverlight & Blend动画设计与实例
当我们定义好了动画元素后，可以直接通过Blend中的对象和时间线面板来为动画元素添 加动画容器时间线（Storyboard），如下图所示：
当动画容器时间线创建好后，只需要选中需要进行创建动画的元素，然后再属性面板下进 行可视化属性设置就可以完成动画的创建，如下图示为创建元素darkMoon的偏移动画。
通过上面的一系列操作设置后切换到XAML视图，可以发现在XAML编码文件里Blend自动生 成了如下代码片段，其作用就是为名为“darkMoon”的动画元素创建两个方向（X,Y）的偏移 动画。
Name="darkMoon" Property="(Transform). (en)[3].(TranslateTransform.X)"> Value="280"/> 第 5 页 07-20-2013 Silverlight & Blend动画设计与实例
Name="darkMoon" Property="(Transform). (en)[3].(TranslateTransform.Y)"> Value="-245"/>
< /Storyboard>
上图为 动画执行过程截图，在某些情况下要实现一些动画效果是不能预先确定的，这就需要在程序 编码中去动态的创建动画效果。使用Blend进行动画设计是非常简单的，尤其是对Adobe Flash熟悉的人员，其实在程序编码中使用程序创建动画也一样的简单，相比之下只是需要人 为的去编写很多的程序代码，另外就是通过程序代码动态的创建动画效果需要开发人员对 Silverlight的动画框架非常熟悉，只有在熟练应用Silverlight动画框架所提供的动画接口 的情况下才能够和使用 Blend设计动画一样随心应手实现各种不同的动画效果。
编写 程序代码创建动画其实也是非常简单的，只要理清了思路和熟练应用Silverlight的动画框架 提供的编程
接口就可以完成动画的开发。首先需要弄清楚动画容器时间线、动画动作、动画类型、动 画效果等基本概念。就以本篇的示例来分析，通过程序动态的创建动画效果的代码如下：
///
/// 创建动画
///
第 6 页 07-20-2013
Silverlight & Blend动画设计与实例
private void CreateStoryboard()
{
//元 素当前所在的坐标点
Point currentPoint = new Point (t(darkMoon),
(darkMoon));
//目标点坐int 标
Point point = new Point(280, -245);
//创建动画 容器时间线
Storyboard storyboard = new Storyboard();
DoubleAnimation doubleAnimation = new DoubleAnimation();
//创 建X轴方向动画
= currentPoint.X;
= point.X;
on = new Duration(new TimeSpan(0,
0, 1));
get (doubleAnimation, darkMoon);
getProperty (doubleAnimation,
new PropertyPath
("(Transform).(en)[3].
(TranslateTransform.X)"));
(doubleAnimation);
//创建Y轴方向动画
doubleAnimation = new DoubleAnimation();
ue (operty,
currentPoint.Y);
ue(erty,
point.Y);
ue(onProperty,
new Duration(new TimeSpan(0, 0, 1)));
get(doubleAnimation, darkMoon);
getProperty(doubleAnimation,
new PropertyPath("(Transform).
(en)[3].(TranslateTransform.Y)"));
(doubleAnimation);
();
}
旋转动画（RotateTransform）
Silverlight的基础动画包括偏移、旋转、缩放、倾斜和翻转动画，这些基础动画毫无疑 问是在Silverlight中使用得最多的动画效果，其使用也是非常简单的。相信看过上一篇《偏 移动画（TranslateTransform）》文章的朋友大多数 第 7 页 07-20-2013
Silverlight & Blend动画设计与实例
对Silverlight & Blend动画设计已 经产生了莫大的兴趣，本篇将继续介绍Silverlight中的基础动画之旋转动画 （RotateTransform）。
所谓旋转动画（RotateTransform）也就是一个元素以一个坐标点为旋转中心点旋转，在 使用旋转动画（RotateTransform）的时候需要注意的有两点：旋转中心点（Center）和旋转 角度(Angle)。同样当我们设计好动画元素后要为其创建动画效果，首先得添加动画容器时间 线（Storyboard），直接在Blend设计界面既可完成该操作。如下图所示：
当动画容器时间线创建好后，只需要选中需要进行创建动画的元素，然后再属性面板下进 行可视化属性设置就可以完成动画的创建，转到“转换”属性面板，然后选择“旋转”，可 以看到如下图所示的属性设置面板。
如上图示，将动画旋转角度(Angle)设置为了360，这表示动画作用元素将以旋转中心坐标 进行旋转360度。此时切换到XAML编码视图可以发现Blend自动生成了如下动画代码块：
第 8 页 07-20-2013
Silverlight & Blend动画设计与实例
Name="fan" Property="(Transform). (en)[2].()"> Value="360"/>
< /Storyboard>
执行这个旋转动画可以看到效果，名为“fan”的元素将在一秒钟内旋转360度。同样也可 以通过编程的方式来动态的创建该旋转动画，详细如下代码块：
private void CreateStoryboard()
{
//创建动画容器时间线
Storyboard storyboard = new Storyboard();
//创建旋转动画
DoubleAnimation doubleAnimation = new DoubleAnimation();
= 360;
on = new Duration(new TimeSpan(0,
0, 1));
get(doubleAnimation, fan);
getProperty(doubleAnimation,
new PropertyPath("(Transform).
(en)[2].()"));
(doubleAnimation);
();
}
或许有人会问，旋转动画我该怎么去用，什么样的场景适合使用旋转动画？其实很多地方 都可以使用旋转动画，比如游戏中的地图场景中的风车，实际上也就是一个旋转动画效果， 旋转动画下面是一条线作为风车的柱子。我们直接在本文的示例项目中加入一条竖线，线的 一端对应于旋转动画的中心，通过Blend 设计后动态生成的XAML编码如下：
第 9 页 07-20-2013
Silverlight & Blend动画设计与实例
Height="194.494" Width="1" UseLayoutRounding="False" ="303" ="184" Data="M408,256 L408,449.49417" StrokeThickness="6" Opacity="0.78" StrokeStartLineCap="Round" StrokeEndLineCap="Round"> <> StartPoint="0.5,0"> Offset="0"/> Offset="1"/>
< /Canvas>
注意上面设置ZIndex值是为了将线条呈现到旋转动画的后面去，这样给人一种旋转动画是 在线条的一端不停的选择，看起就像是一个风车在旋转一样，实际上就是一种视觉欺骗，记 得我一个做3D游戏开发的朋友给我说过，3D游戏里的大多数效果全都是视觉欺骗，嘎嘎 ~~~~~~~~~~,OK,现在运行动画的效果则如下截图：
这样的效果貌似不好看，我们可以为其他加入背景图片进行装饰，根据背景图片进行调整 适当的位置、元素颜色、形状等，以更为真实的效果呈现在用户面前。具体的调整过程这里 就不作过多的介绍，给个上了背景的截图演示下吧：
第 10 页 07-20-2013
Silverlight & Blend动画设计与实例
缩放动画（ScaleTransform）
在Silverlight的动画框架中，ScaleTransform类提供了在二维空间中的坐标内进行缩放 操作，通过 ScaleTransform可以在水平或垂直方向的缩放和拉伸对象，以实现一个简单的缩 放动画效果，故此我将其称为缩放动画（ScaleTransform）。使用ScaleTransform需要特别 关注的有两点：中心点坐标和X、Y轴方向的缩放比例，比例值越小则对象元素就越小（既收 缩），比例值越大则对象元素就越大（既呈现为放大效果）。
第 11 页 07-20-2013
Silverlight & Blend动画设计与实例
Blend对Silverlight里的动画设计支持非常强大，同偏移动画、旋转动画一样简单，要实 现缩放动画也只需要对设计好的动画元素进行简单的设计就能完成动画效果的创建。
通过创建动画容器时间线后，如上图进行动画效果属性的设置，Blend便会生成相应的动 画编码在XAML文件里，详见如下代码块：
Name="truck" Property="(Transform). 第 12 页 07-20-2013 Silverlight & Blend动画设计与实例 (en)[0].()"> Value="0.15"/>
Name="truck" Property="(Transform). (en)[0].()"> Value="0.15"/>
< /Storyboard>
任何一个元素对象，其缩放动画（ScaleTransform）的默认值为（1，1），既保持元素原 样不变。如前面所说，比例值越小则对象元素就越小（既收缩），比例值越大则对象元素就 越大（既呈现为放大效果）。如上示例就是将缩放比例值设置的0.15，其运行效果如下图所 示：
如果上图动画效果使用程序编码去实现，同样的也是很简单的，主要就是利用动画根据时 间去控制对象的ScaleTransform变换效果的ScaleX和ScaleY值，详细如下：
///
/// 创建对象truck的缩放动画，3秒钟从原始大小缩放到15%的大小
///
public void CreateStoryboard()
{
//创建动画容器时间线
Storyboard storyboard = new Storyboard();
//创建X轴方向的缩放动画,设置对象缩放到0.15,置对象缩放缓存时间为3秒
DoubleAnimation doubleAnimation = new DoubleAnimation();
= 0.15;
on = new Duration(new TimeSpan(0,
0, 3));
get(doubleAnimation, truck);
第 13 页 07-20-2013
Silverlight & Blend动画设计与实例
getProperty(doubleAnimation,
new PropertyPath("(Transform).
(en)[0].()"));
(doubleAnimation);
//创建Y轴方向的缩放动画,设置对象缩放到0.15,置对象缩放缓存时间为3秒
doubleAnimation = new DoubleAnimation();
ue(erty, 0.15);
ue(onProperty,
new Duration(new TimeSpan(0, 0, 3)));
get(doubleAnimation, truck);
getProperty(doubleAnimation,
new PropertyPath("(Transform).
(en)[0].()"));
(doubleAnimation);
();
}
如上示例，如果将移动的对象换成一个“车”，执行动画的时候就感觉是一辆车在马路上 行驶了。缩放动画（ScaleTransform）在平时的开发中非常适用，不如界面上有一个组件， 默认为缩放一半显示，当用户的鼠标指向它的时候将对象放大到正常比例（x,y=>1,1）显 示，鼠标离开的时候将对象恢复到默认大小（x,y=>0.5,0.5），此时就可以使用缩放动画 （ScaleTransform）去实现。
RenderTransformOrigin="0.5,0.5"> ScaleY="0.5"/> < /Ellipse> nter += (mes, mee) => { Storyboard storyboard = new Storyboard(); DoubleAnimation doubleAnimation = new DoubleAnimation (); = 1; on = new Duration 第 14 页 07-20-2013 Silverlight & Blend动画设计与实例 (lliseconds(300)); get(doubleAnimation, ellipse); getProperty(doubleAnimation, new PropertyPath("(Transform). (en)[0].()")); (doubleAnimation); doubleAnimation = new DoubleAnimation(); = 1; on = new Duration (lliseconds(300)); get(doubleAnimation, ellipse); getProperty(doubleAnimation, new PropertyPath("(Transform). (en)[0].()")); (doubleAnimation); (); }; eave += (mls, mle) => { Storyboard storyboard = new Storyboard(); DoubleAnimation doubleAnimation = new DoubleAnimation (); = 0.5; on = new Duration (lliseconds(300)); get(doubleAnimation, ellipse); getProperty(doubleAnimation, new PropertyPath("(Transform). (en)[0].()")); (doubleAnimation); doubleAnimation = new DoubleAnimation(); = 0.5; on = new Duration (lliseconds(300)); get(doubleAnimation, ellipse); getProperty(doubleAnimation, new PropertyPath("(Transform). (en)[0].()")); (doubleAnimation); 第 15 页 07-20-2013 Silverlight & Blend动画设计与实例 (); }; PS:上面代码块仅是为了掩饰缩放动画（ScaleTransform）的使用，如果真要实现圆形对 象的鼠标指向放大，移开恢复原状的效果只需要直接设置其宽度（Width）和高度（Height） 属性就可以了。 倾斜动画（SkewTransform） Silverlight中的倾斜变化动画（SkewTransform）能够实现对象元素的水平、垂直方向的 倾斜变化动画效果。我们现实生活中的倾斜变化效果是非常常见的，比如翻书的纸张效果， 关门开门的时候门缝图形倾斜变换。在Silverlight中实现一个倾斜变化的动画效果是非常简 单的，如果利用Blend这种强大的设计工具来实现那更是锦上添花。 倾斜效果的动画应用效果其实非常好看，使用倾斜变换需要注意的有两点：倾斜方向和倾 斜中心点。可以以某点为倾斜中心点进行X或Y坐标方向进行倾斜，如下以默认中心店进行的 各种不同程度倾斜的简单示例： 第 16 页 07-20-2013 Silverlight & Blend动画设计与实例 AngleY="0"> AngleY="-5"> AngleY="15"> < /Grid> 如果使 用Blend来设计倾斜效果的变换动画就非常简单了，只需要在属性面板里设置相关的实现就可 以完成整个倾斜变换动画的设计，如下绘制了一扇门并 第 17 页 07-20-2013 Silverlight & Blend动画设计与实例 为其设置开门的效果，开门的时候门 缝间的呈现效果就是以倾斜变换的效果实现的： 查看XAML文件可以发现，Blend生成了如下代码，用于实现开门的效果，需要注意的是这 里应用到了倾斜中心点，们是朝一个方向（X）开关，其呈现的倾斜效果就是Y坐标方向的倾 斜变换。如上图所示，设置了Y坐标方向倾斜-17，既形成门向水平下方向倾斜效果。 Name="door" Property="(TransformOrigin)"> Value="1,0.5"/> Value="1,0.5"/> Name="door" Property="(Transform).(en) [1].()"> Value="-17"/> < /Storyboard> 第 18 页 07-20-2013 Silverlight & Blend动画设计与实例 故事板(StoryBoards)和动画(Animations) 正如你所看到的，Blend是一个非常强大的节约时间的设计工具，在Blend下能够设计出很 多满意的动画作品，或许他具体是怎么实现的，通过什么方式实现的我们还是一无所知。本 篇将续前面几篇基础动画之上，详细介绍Silverlight里提供故事板（StoryBorards）的属性 和各种不同类型的动画（Animations）的详细知识点，揭晓在Blend下设计动画的内幕故事。 一、故事板（StoryBoard）属性 Silvelight中的故事板（StoryBoard）提供了管理时间线的功能接口，可以用来控制一个 或多个Silverlight动画进程，故我也称其为动画时间线容器。如下XAML代码块演示了通过 StoryBoard来管理了名为GreenBall的元素在X坐标方向上的偏移变换动画。 Name="GreenBall" Property="(Transform). (en)[3].(TranslateTransform.X)"> Value="540"/> < /Storyboard> StoryBoard提供了六个常用的动画属性选项，它们分别是： AutoReverse,BeginTime,Duration,FillBehavior,RepeatBehavior,SpeedRatio。通过这六个 属性可以用来控制动画的基本行为动作，比如想要实现动画的缓 第 19 页 07-20-2013 Silverlight & Blend动画设计与实例 冲时间，就需要用到 Duration属性；设置动画的开始时间则用 BeginTime；如果动画执行完后根据执行路线反向 执行到原始状态则需要使用AutoReverse;如果需要设置动画的运行速度则使用 SpeedRatio就 可以完成。以下代码块演示了AutoReverse属性的使用，动画运行完后将按着原来的运行路线 进行反向运行。更多详细可参考这篇博文介绍：《动画基础快速入门Animation》或者MSDN。 Name="GreenBall" Property="(Transform). (en)[3].(TranslateTransform.X)"> Value="540"/> < /Storyboard> Storyboard的属性是可以组合应用的，如上代码块给动画设置了AutoReverse属性，使其 在动画执行完后通过原来的运行路径进行回滚动画，可以给该动画时间线容器添加一个 BeginTime属性，使其在程序加载后5秒钟才开始执行动画，这样就使用到了两个属性，如下 代码块： BeginTime="00:00:05"> ...... < /Storyboard> 二、动画类型（Types of animation） Silverlight中的动画主要分From/To/By和关键帧动画两种类型。 From/To/By动画也称为线性插值动画（Linear Interpolation），是Silverlight类型中 最简单的一种动画，只需要设置开始（From）、结束（To）和动画值（By）就可以完成动画 的创建，Silverlight 3中提供了三种基础的From/To/By动画类型：DoubleAnimation、 ColorAnimation和PointAnimation. 关键帧动画比From/To/By动画更加强大，无需指定动画的开始、结束以及动画缓冲时间等 相关参数，只需要关注关键帧和如何去控制动画就行了。Silverlight 3中提供了四种基本的 关键帧动画：缓和(Easing)、线性(Linear)、样条(Spline)和离散(discreet)。 DoubleAnimation的使用是非常简单的，只需要搞清楚From/To/By三要素就基本掌握了该 类型动画的使用，下面是一个简单的通过DoubleAnimation实现的圆形移动的示例。 第 20 页 07-20-2013 Silverlight & Blend动画设计与实例 xmlns="/winfx/2006/xaml/presentation" xmlns:x="/winfx/2006/xaml" Width="800" Height="600"> Name="Ellipse" Property="(Transform).(en) [3].(TranslateTransform.X)" From="0" By="150" Duration="00:00:01"/> Fill="#FFFF0000" ="181" ="92" RenderTransformOrigin="0.5,0.5" x:Name="Ellipse"> < /UserControl> 下面通过一个稍复杂的示例来演示DoubleAnimation动画的使用，如下动画代码块实现了 名称为Slider对象的X坐标方向的移动动画： Property="(Transform). (en)[3].(TranslateTransform.X)" Duration="00:00:00.50" To="150"/> < /Storyboard> < Storyboard x:Name="SlideIn"> 第 21 页 07-20-2013 Silverlight & Blend动画设计与实例 Property="(Transform). (en)[3].(TranslateTransform.X)" Duration="00:00:00.50" To="0"/> < /Storyboard> 如上动画定义代码块中定义了两个动画，一个实现将对象Slider向X坐标方向移动到150像 素点的位置，第二个动画实现将名为Silder的对象向X方向移动到0像素点的坐标位置，这样 其实就实现了一个呈现与不呈现的效果。这里我们发挥大脑的潜力想象一下，如果Slider是 一个面板对象，通过鼠标指向和离开的事件使用上面两个动画进行控制其不就实现了面板的 鼠标指向就显示，离开就退回到原来的位置了？答案却是如此，详细见下代码块： public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); nter += new MouseEventHandler (Slider_MouseEnter); eave += new MouseEventHandler (Slider_MouseLeave); } private void Slider_MouseLeave(object sender, MouseEventArgs e) { (); } private void Slider_MouseEnter(object sender, MouseEventArgs e) { (); } } 第 22 页 07-20-2013 Silverlight & Blend动画设计与实例 通过上面 的示例，是否觉得要在Silverlight中实现一个动画是非常简单的？上面的示例就是掩饰了如 何使用From/To/By的 DoubleAnimation实现了对象的移动动画，同样也可以使用关键帧动画 （DoubleUsingKeyframes）来实现这一功能。如下代码片段演示了元素Silder向X坐标方向移 动到150像素点。 Storyboard MoveRight = new Storyboard(); DoubleAnimationUsingKeyFrames Anim = new DoubleAnimationUsingKeyFrames (); getName(Anim, "Slider"); ue (PropertyProperty, new PropertyPath ("(Transform).(en)[3]. (TranslateTransform.X)")); ime = new TimeSpan(0, 0, 0); SplineDoubleKeyFrame SKeyFrame = new SplineDoubleKeyFrame(); e = meSpan(conds(0.5)); = 150; (SKeyFrame); (Anim); ...... ColorAnimation类型动画主 要应用于颜色上的变换动画效果，比如有一个圆，默认的填充颜色是红色（Red）,设计一个 动画通过2秒钟的动画换成将圆的填充颜色变换为蓝色。 ="195" Fill="#FFFF0000" Cursor="Hand" x:Name="RedEllipse"/> 可以通过Blend的设计器来完成这样的动画的创建，在对象和时间轴面板里新建动画容器 时间线，然后选中RadEllipse圆形对象在0秒的时间线上填充其颜色为红色，2秒的时间线上 填充其颜色为蓝色，详细设计如下图： 第 23 页 07-20-2013 Silverlight & Blend动画设计与实例 Blend最终生成的XAML代码如下： Name="RedEllipse" Property="(). ()"> Value="Red"/> Value="Blue"/> < /Storyboard> 有Blend这样强大的设计工具是很幸运的，对于设计人员来说要实现一些动画需求直接通 过界面设计就完成了。对于程序员来说就烦恼了，由于不熟悉设计工具，要实现某种动画只 能通过编写程序代码来完成，这将是一个很庞大的工程，比如说当鼠标指向一圆的时候其填 充颜色慢慢的向蓝色（Blue）渐变，鼠标离开的时候慢慢的恢复其默认颜色红色。实现这动 画效果则需要写上如下长篇的程序代码： private Storyboard TurnBlue = new Storyboard(); private Storyboard TurnRed = new Storyboard(); private ColorAnimation BlueColor = new ColorAnimation(); private ColorAnimation RedColor = new ColorAnimation(); public MainPage() { InitializeComponent(); ue(NameProperty, "RedEllipse"); 第 24 页 07-20-2013 Silverlight & Blend动画设计与实例 ue(PropertyProperty, new PropertyPath("().()")); = ; (BlueColor); ("TurnBlue", TurnBlue); ue(NameProperty, "RedEllipse"); ue(PropertyProperty, new PropertyPath("().()")) = ; (RedColor); ("TurnRed", TurnRed); nter += (senderRed, eRed) => { (); }; eave += (senderBlue, eBlue) => { (); }; } 这样的代码实现其实就是用程序代码创建了两个动画，一个由红色变换到蓝色，一个则由 蓝色变换到红色，按照前面的方法直接在Blend中设计也是可以的。最终的运行效果如下图： PointAnimation类型动画更好理解，也就是动画效果是通过不同的坐标点来控制的 。比如说浪涛的效果，下面就以浪涛为示例来演示PointAnimation类型动画的使用。 FillBehavior="HoldEnd"> Name="water" Property="().(s)[0]. (ts)[1].(2)"> 第 25 页 07-20-2013 Silverlight & Blend动画设计与实例 Value="351.732116699219,36.4"/> Value="415.732116699219,84.4"/> Name="water" Property="(). (s)[0].(ts)[1].(3)"> Value="425.5,32.8349914550781"/> Value="489.5,80.8349914550781"/> Name="water" Property="(). (s)[0].(ts)[2].(1)"> Value="499.271911621094,29.2635669708252"/> Value="563.271911621094,77.2635650634765"/> Name="water" Property="(). (s)[0].(ts)[0].(2)"> Value="112.729011535644,80.834991455078"/> Value="104.729011535645,32.8349914550781"/> Name="water" Property="(). (s)[0].(ts)[0].(3)"> Value="185.5,80.834991455078"/> Value="177.5,32.8349914550781"/> Name="water" Property="(). (s)[0].(ts)[1].( 第 26 页 07-20-2013 Silverlight & Blend动画设计与实例 nt1)"> Value="258.275024414062,80.834991455078"/> Value="250.275024414063,32.8349914550781"/> Name="water" Property="(). (s)[0].(ts)[2].(2)"> Value="600.7,72.7879943847655"/> Value="608.7,32.8349229097365"/> Name="water" Property="(). (s)[0].(ts)[2].(3)"> Value="665.5,72.7879943847655"/> Value="673.5,32.8349229097365"/> Name="water" Property="(). (s)[0].(ts)[3].(1)"> Value="730.299926757813,72.7879943847655"/> Value="738.299926757813,32.8349229097365"/> Name="water" Property="(). (s)[0].(ts)[3].(2)"> Value="801.5,40.8349914550781"/> Value="801.5,56.8349229097366"/> Name="water" Property="(). 第 27 页 07-20-2013 Silverlight & Blend动画设计与实例 (s)[0].(ts)[3].(3)"> Value="801.5,40.8349914550781"/> Value="801.5,56.8349229097366"/> Name="water" Property="(). (s)[0].(ts)[4].(1)"> Value="801.5,40.8349914550781"/> Value="801.5,56.8349229097366"/> Name="water" Property="(). (s)[0].(oint)"> Value="1.59,32.834991455078"/> Value="1.55,88.8349914550779"/> Name="water" Property="(). (s)[0].(ts)[0].(1)"> Value="1.59,32.834991455078"/> Value="1.55,88.8349914550779"/> < /Storyboard> 第 28 页 07-20-2013 Silverlight & Blend动画设计与实例 动画技巧（Animation Techniques）之对象与路径转化、波感特效 当我们在进行Silverlight & Blend进行动画设计的过程中，可能需要设计出很多效 果不一的图形图像出来作为动画的基本组成元素。然而在设计过程中可能会出现许多的问题 ，比如当前绘制了一个椭圆，但是在动画中仅仅只需要椭圆的一半或是更多更少的部分用作 与动画元素，这时候就需要对椭圆对象进行相应的处理才能满足我们的需求，那到底该怎么 做才能实现最终想要的效果呢？本篇将介绍在Microsoft Expression Blend中进行动画设计 的一些常用的功能点和动画设计技巧。 一、转换对象为路径 将一个对象元素 转化为路径是非常有用的，通过路径选择工具可以将转化后的路径对象进行任意拉动变形， 以达到理想的设计效果。可以通过Blend 菜单中的对象-->路径-->转换为路径以实现 对象到路径的转换，也可以使用下图所示的方法进行对象到路径的转换： 第 29 页 07-20-2013 Silverlight & Blend动画设计与实例 就以上面截取椭圆中的一部分为例，就需要将圆(Ellipse)转化为路径后才能才能通过路 径工具对路径进行拖动变形，最终以实现想要的图形效果。如下图所示就是对椭圆进行变形 处理后将其多余的部分剪切掉，实现了最终的图形效果： ="274" Fill="#FF87A50F"/> 在XAML编码级则将会从Ellipse对象转化为Path对象，如上图最终的图形效果Path对应的 XAML编码为： ="64" ="274" Data="M240,87 C240,135.04877 186.27417,174 120,174 C53.72583,174 0,135.04877 0,87 C0,38.951225 53.72583,0 120,0 C186.27417,0 240,38.951225 240,87 z"/> 二、波感特效 波感效果也称幽灵效果，如果为某个对象使用了波感效果，通过对象某种行为触发了该效 果则对象边框将会出现像波浪一样的效果，直到动画执行完成后隐藏行为对象。如果从技术 实现的角度来理解的话，也就是一个对象的的放大动画 第 30 页 07-20-2013 Silverlight & Blend动画设计与实例 行为，通过在放大过程中动态改变其 透明度来实现。如果不清楚波感效果具体是什么样的效果的可以查看 /这个站点，点击里面的菜单导航（my location,sms,about,help）中的任意一个就可以进行在线体验。 比如下面的XAML定义，在界面上绘制了一个渐变填充的圆形： ="355" ="274" MouseLeftButtonUp="RedBall_MouseUp"> <> GradientOrigin="0.479999989271164,0.46"> X="-0.07" Y="-0.21"/> Offset="1"/> < /Ellipse> 接下来对这个圆形对象进行波感效果设计，本文前面说过波感效果其实就是一个缩放动画 ，对一个和基础对象一样的对象进行放大到一定程度后将其隐藏。这里需要将上面设计好的 圆复制一个作为动画效果设计对象，如下图： 第 31 页 07-20-2013 Silverlight & Blend动画设计与实例 缩放动画效果可以通过ScaleTransform来实现，透明度则使用Opacity属性进行设置，要 实现波感效果主要就是通过动画在一定的时间内动态的改变这两项的属性值， ScaleTransform的X,Y默认为1，Opacity默认也是1。 首先创建一个动画容器时间线，然后移动时间轴到1秒的位置，选中复制后的圆形对象设 置ScaleTransform的X,Y为 3，Opacity的属性值为0，以实现一个放大透明的动画效果。当对 象完全透明后就相当于隐藏了，其实也可将其Visibility属性为 Collapsed，将对象隐藏不 呈现。如下图： 第 32 页 07-20-2013 Silverlight & Blend动画设计与实例 主要就是设置了三个属性值，这三个属性值都在动画过度中动态改变，通过Blend中进行 设置后可以看到生成了如下XAML编码： Completed="RedBall_Clicked_Completed"> Name="RedBall_Copy" Property="(y)" BeginTime="00:00:00"> Value="0"/> Name="RedBall_Copy" Property="(Transform). (en)[0].()" BeginTime="00:00:00"> Value="3"/> Name="RedBall_Copy" Property="(Transform). (en)[0].()" BeginTime="00:00:00"> Value="3"/> < /Storyboard> 通过查看前面的代码片段可以看到，给圆形对象添加了事件处理： MouseLeftButtonUp="RedBall_MouseUp"，也就是点击了圆对象后需要启动动画的执行： private void RedBall_MouseUp(object sender, MouseButtonEventArgs e) { RedBall_lity = e; RedBall_(); } 同样也给动画添加了完成的事件处理：Completed="RedBall_Clicked_Completed"，当动 画执行完成后做什么操作。需要做的就是将圆形对象的相关属性设置为最初的属性值，以便 在进行第二次动画的时候能够正确无误的实现其效果。 第 33 页 07-20-2013 Silverlight & Blend动画设计与实例 private void RedBall_Clicked_Completed(object sender, EventArgs e) { RedBall_(); RedBall_y = 1; RedBall_lity = sed; } OK，到这里就完成了整个波感特效的设计制作，最终的运行效果如下图所示，如果你对波 感特效感兴趣，建议你下载本文示例代码运行，进一步的体验波感特效。 模糊效果（BlurEffect）与阴影效果 模糊效果（BlurEffect）与阴影效果（DropShadowEffect）是两个非常实用和常用的两个 特效，比如在开发相册中，可以对照片的缩略图添加模糊效果，在放大照片的过程中动态改 变照片的大小和模糊的透明度来达到一个放大透明的效果。 一、模糊效果（BlurEffect） Silverlight中的每个对象都是支持添加模糊和阴影效果的， 在Blend工具中通过“外观 ”面板可以直接可视化的进行设计完成模糊和阴影效果的添加，以及效果参数的调整。如下 图为模糊效果的设计界面： 第 34 页 07-20-2013 Silverlight & Blend动画设计与实例 点击”新建“将会弹出模糊和阴影效果选择对话框，下图为模糊和阴影效果选择对话框： 就拿相册开发中的一个典型实例来分析吧，比如相片默认缩小为一定的比例并添加了模糊 的效果呈现在相片列表中的，当鼠标指向照片的时候将照片进行放大显示（放大图片可通过 缩放动画实现，详细可查阅：《Silverlight & Blend 第 35 页 07-20-2013 Silverlight & Blend动画设计与实例 动画设计系列三：缩放动画 （ScaleTransform） 》），并动态改变其模糊效果值为0以达到可清晰的查看照片效果。如 下XAML对图片的相关定义： Source="" Opacity="1" ="240" ="180" RenderTransformOrigin="0.5,0.5" MouseEnter="Flower_MouseEnter" MouseLeave="Flower_MouseLeave" OpacityMask="{x:Null}"> <> < /Image> 可以通过两个动画来处理，一个完成将图片缩放比例进行放大(ScaleX，ScaleY：1-- >2)同时改变其模糊值为0(Radius：5-->0)，另一个动画则相反。 Name="Flower" Duration="00:00:00.50" To="2" Property="(Transform). (en)[0].()"> Name="Flower" Duration="00:00:00.50" To="2" Property="(Transform). (en)[0].()"> Name="Flower" Duration="00:00:00.50" To="0" Property="(). ()"> < /Storyboard> < Storyboard x:Name="Flower_Level"> Name="Flower" Duration="00:00:00.50" To="1" 第 36 页 07-20-2013 Silverlight & Blend动画设计与实例 Property="(Transform). (en)[0].()"> Name="Flower" Duration="00:00:00.50" To="1" Property="(Transform). (en)[0].()"> Name="Flower" Duration="00:00:00.5000000" To="5" Property="(). ()"> < /Storyboard> 通过鼠标事件（MouseEnter,MouseLeave）动态的触发上面定义的两个动画的执行就可以 达到预期的目的，如下代码： private void Flower_MouseEnter(object ventArgs e) { // TODO: Add event handler _(); } private void Flower_MouseLeave(object ventArgs e) { // TODO: Add event handler _(); } 二、阴影效果（DropShadowEffect） Silverlight中应用阴影效果和模糊效果一样的简单，通添加模糊效果一样的方式实现对 元素添加阴影效果处理，需要关注的就是设置阴影效果的相关属性。 BlurRadius：模糊半径 Color：填充颜色 Direction：方向 Opacity：透明度 ShadowDepth：阴影深度 第 37 页 07-20-2013 sender, implementation here. sender, implementation here. Silverlight & Blend动画设计与实例 通过以上几个属性选项的设置就可以完成阴影效果的设计，由于其设计过程非常简单，详 细如下图所示： 对应生成的XAML代码如下： ="180" Source="" Stretch="Fill" Cursor="Hand"> <> BlurRadius="18" ShadowDepth="27" Opacity="0.6" Direction="321"/> < /Image> 拖放(Drag-Drop)操作与拖放行为 在Silverlight中自身并没有提供拖放功能的相关实现，要实现拖放功能得借助其事件支 持（MouseLeftButtonDown、 MouseLeftButtonUp和MouseMove）来完成，实际应用中我们可 以通过行为（Behavior）特性将拖放操作封装为行为，这样可达到代码复用的效果。而在 Blend中则直接提供了拖放操作行为，它位于的 名称空间下。 Silverlight中的拖放操作通常是使用事件驱动动态定位对象的坐标来实现，首先来看看 如何通过代码的可编程方式在Silverlight中实现拖放操作，如下代码块： private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e) 第 38 页 07-20-2013 Silverlight & Blend动画设计与实例 { FrameworkElement element = sender as FrameworkElement; MousePosition = ition(null); IsMouseCaptured = true; eMouse(); = ; } private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e) { FrameworkElement element = sender as FrameworkElement; IsMouseCaptured = false; eMouseCapture(); MousePosition.X = MousePosition.Y = 0; = null; } private void OnMouseMove(object sender, MouseEventArgs e) { FrameworkElement element = sender as FrameworkElement; if (IsMouseCaptured) { double Y = ition(null).Y - MousePosition.Y; double X = ition(null).X - MousePosition.X; X = X + (double)ue(operty); Y = Y + (double)ue(perty); ue(operty, X); ue(perty, Y); MousePosition = ition(null); } } 如上定义好的三个方法实现了对象的拖放算法，实际应用中只需要将需要进行拖放移动的 对象分别添加MouseLeftButtonDown、MouseLeftButtonUp和MouseMove事件处理就行了。如下 示例代码： eftButtonDown += (s, e) => OnMouseLeftButtonDown(s, e); eftButtonUp += (s, e) => OnMouseLeftButtonUp(s, e); ove += (s, e) => OnMouseMove(s, e); 第 39 页 07-20-2013 Silverlight & Blend动画设计与实例 按照常规做法我们会将以上相关方法的实现封装为一个基类以达到复用的目的，但本文不 推荐使用基类去封装拖放行为，因为Silverlight有专门用于处理对象行为的特性-Behaviors 。在Silverlight中ctivity命名空间下提供了行为的基础框架，我们 可以进行自由的扩展行为以实现自己的不同需求。安装Blend后可以在安装目录下找到 这个库，这个库提供了一些比较常用的集中行为 扩展，在Blend中通过 “窗口”--“资产”打开资产面板，选择行为资产就可以查看到 Silverlight 3中所提供的扩展行为，如下图： 我们可以将上面实现对象拖放的功能封装为行为以达到代码复用，在Blend中通过“文件 ”--“新建”菜单项可打开新建对象对话框。 第 40 页 07-20-2013 Silverlight & Blend动画设计与实例 Blend新 建向导创建的行为提供了一套行为模板，如下代码块： public class Behavior1 : Behavior { public Behavior1() { // 在此点下面插入创建对象所需的 代码。 // // 下面的代码行用于在命令 // 与要调用的函数之间建立关系。如果您选择 // 使用 MyFunction 和 MyCommand 的已注释掉的版本，而不是创建自己的实现， // 请取消注释以下行并添加对 ctions 的引用。 // // 文档将向您提供简单命令实现的示例， // 您可以使 用该示例，而不是使用 ActionCommand 并引用 Interactions 程序集。 // //and = new ActionCommand (tion); } 第 41 页 07-20-2013 Silverlight & Blend动画设计与实例 protected override void OnAttached() { ched(); // 插入要在将 Behavior 附加到对象时运行的代码。 } protected override void OnDetaching() { ching(); // 插入要在从对象中删除 Behavior 时 运行的代码。 } /* public ICommand MyCommand { get; private set; } private void MyFunction() { // 插入要在从对象中删除 Behavior 时运行的代码。 } */ } 要实现自定义行为通过此行为模板进行自我扩展就行了，位于 ctivity中的Behavior提供了将行为或命令进行封装以达到可进行附 加到其他的一个对象上，需要注意的是自定义行为默认继承 Behavior 下面为将本篇前面实现对象拖放功能的代码进行了行为的封装，完整代码如下： /// /// Behavior：封装行为和命令，便于附加到对象中。 /// DependencyObject：不能实现访问鼠操作事件 /// UIElement:可访问鼠标事件 /// public class DragBehavior : Behavior { private UIElement attachedElement; private UserControl parent; private bool IsMouseCaptured; private Point MousePosition; protected override void OnAttached() 第 42 页 07-20-2013 Silverlight & Blend动画设计与实例 { attachedElement = atedObject; parent = sual as UserControl; eftButtonDown += (s, e) => OnMouseLeftButtonDown(s, e); eftButtonUp += (s, e) => OnMouseLeftButtonUp(s, e); ove += (s, e) => OnMouseMove(s, e); } private void OnMouseMove(object sender, MouseEventArgs e) { FrameworkElement element = sender as FrameworkElement; if (IsMouseCaptured) { double Y = ition(null).Y - MousePosition.Y; double X = ition(null).X - MousePosition.X; X = X + (double)ue (operty); Y = Y + (double)ue (perty); ue(operty, X); ue(perty, Y); MousePosition = ition(null); } } private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e) { FrameworkElement element = sender as FrameworkElement; IsMouseCaptured = false; eMouseCapture(); MousePosition.X = MousePosition.Y = 0; = null; } private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e) { 第 43 页 07-20-2013 Silverlight & Blend动画设计与实例 FrameworkElement element = sender as FrameworkElement; MousePosition = ition(null); IsMouseCaptured = true; eMouse(); = ; } protected override void OnDetaching() { ching(); } } 通过行为特性将对象的拖放功能进行封装以达到复用的目的，以上就全部实现了这个功能 ，测试可通过Ctrol+Shift+B编译项目，然后通过“资产”面板就可以发现以上自定义扩展的 拖放行为。 使用行为非常简单，打开Blend的资源面板中，选中需要使用的行为，将其拖放到要使用 该行为的对象（Blend中设计的界面对象）上就行了。其实在Blend也提供了拖放行 为:MouseDragElementBehavior，直接使用这个行为和本篇所介绍的实现达到的是同样的效果 。以下为分别使用这两种行为所对应生成的XAML编码： xmlns="/winfx/2006/xaml/presentation" xmlns:x="/winfx/2006/xaml" xmlns:i="clr- namespace:ctivity;assembly=ctivity" 第 44 页 07-20-2013 Silverlight & Blend动画设计与实例 xmlns:local="clr-namespace:DragBehavior" xmlns:il="clr- namespace:;assembly=sion .Interactions" x:Class="ntrol" Width="800" Height="600"> Height="100" Width="100" ="100" ="100"> Height="100" Width="100" ="219" ="397"> < /UserControl> 动画（Animation）与视图状态管理 Silverlight中的动画（Animation）与视图状态管理(Visual State Manager) 结合使用 是非常常见的，动画用于管理对象在某段事件段内执行的动画动作，视图状态管理则用于控 制对象在多个不同的视觉状态之间切换、导航。本篇主要介绍动画（Animation）与视图状态 管理(Visual State Manager)的结合应用，关于视图状态管理的详细内容请大家查看相关资 料。 举一个简单的示例，比如在开发一个项目中有一个按钮，当我点击这个按钮的时候就动态 的从某个方向（如从上到下的方向，也就是从屏幕的上方动态的滑动到屏幕中）呈现出一个 面板。 要实现这个简单示例，可以通过《Silverlight & Blend动画设计系列一：偏移动画 （TranslateTransform）》里介绍的偏移动画特性去实现，为了效果上能够更加美观，可以 增加一些其他的变换，比如在面板向下滑动出现的过程中动态的改变面板的透明度，从完全 透明到不透明效果。当我们清楚了需求接下来就可以在Blend中进行设计了，首先布局界面（ Button,Border[TextBlock]）如下图所示： 第 45 页 07-20-2013 Silverlight & Blend动画设计与实例 添加Storyboard并选中第一秒时间线，设置border对象的Transform.Y为-296（这个值可 以在设计中直接通过鼠标拖动 Border对象确定），然后移动时间线到第三秒位置，设置 Transfrom.Y为0。通过还可以在第一秒的时候设置border不透明度值为0%，第三秒的时候设 置不透明度为100%，这样在动画过程中的效果会更好。 通过上图中布局的Button去触发动画开发，编译运行程序就可以查看到其效果，当点击按 钮的时候就会看到一个面板从顶部已模糊到清晰的动画载入到界面上。另外可以将Border对 象默认设置为不显示(Visibility="Collapsed")，当启动动画的时候将其设置为显示 （Visibile）。 Name="border" Property="(Transform). (en)[3].(TranslateTransform.Y)"> Value="-296"/> Value="0"/> 第 46 页 07-20-2013 Silverlight & Blend动画设计与实例 Name="border" Property="(y)"> Value="0.3"/> Value="1"/> Name="border" Property="(lity)"> <> <> < /Storyboard> 以上的整个动画实现采用的是Border的位置变换实现的，接下来要介绍的就是如何通过视 图状态管理(Visual State Manager)去实现和上面同样的功能。首先将界面设计为如下图所 示界面，Border不透明度为30%,默认Y的位置为-298。 第 47 页 07-20-2013 Silverlight & Blend动画设计与实例 接下来就是进行状态的设计了，可以通过“窗口”菜单下的“状态”选项打开状态管理框 ，首先添加状态组，然后再状态组下添加两个状态，分别命名为In和Out。如下截图： “In”状态用于完成面板从外动态的进入主界面，实际上也就是完成一个位置变换动画， 详细如下截图所示： “Out”状态与“In”状态相反，用于完成面板从主界面以动画的形式推出主界面，详细 设计图下截图所示： 在整个进入和退出的动画状态中，为了增强用户体验以及达到更好的效果，我还特增加了 模糊到透明的动画处理。最终生成的状态代码如下： 第 48 页 07-20-2013 Silverlight & Blend动画设计与实例 BeginTime="00:00:00" Duration="00:00:00.0010000" Name="border" Property="(lity)"> KeyTime="00:00:00"> <> BeginTime="00:00:00" Name="border" Property="(Transform).(en) [3].(TranslateTransform.Y)"> KeyTime="00:00:00" Value="-296"/> KeyTime="00:00:01" Value="0"/> BeginTime="00:00:00" Name="border" Property="(y)"> KeyTime="00:00:00" Value="0.3"/> KeyTime="00:00:01" Value="1"/> BeginTime="00:00:00" Duration="00:00:00.0010000" Name="border" Property="(lity)"> 第 49 页 07-20-2013
发布评论