零基础学通Silverlight4（5）：动画

时间 2020-01-19

标签零基础 silverlight4 silverlight 动画栏目 Silverlight 繁體版

原文原文链接

5.1 动画特性

经过动画能够建立动态的用户界面，能够不使用事件处理代码，而用声明的方式建立动画，使画面动起来不用编写任何C#代码，并将它无缝地集成到普通的页面中。动画由静态图像快速连续的变换的一种幻觉，各图形间轻微的不一样，连串起来，就觉得是产生了一个变化，经过快速播放一系列图像而产生的错觉。人脑将这一系列图像看做是一个不断变化的场景。在电影中，摄影机经过每秒记录大量照片（即，帧）来产生这种错觉。当放映机播放这些帧时，观众看到的是运动的图片。

建立逐帧动画意味着每一帧均可以包含不一样的图像（或对象）。所生成的动画可能会很是大，而且在运行时要占用大量资源。出于上述缘由，Expression Blend 动画将基于记录属性更改的关键帧，并在运行时动态显示属性更改之间的过渡效果。此外，在 Expression Blend 中，全部须要在动画时间线期间显示或消失的对象在整个时间线期间均存在。但能够使用关键帧来更改对象的可见性属性，使其显示或消失。

动画类型分为两类：

①基本动画：可称为From/To/By动画，经过指定一个起始和终止值，或属性的一个偏移来定义动画，如上面的演示同样。动画类型有：DoubleAnimation、ColorAnimation、PointAnimation

②关键帧动画：经过一系列关键帧指定的值之间运动。动画类型有：DoubleAnimationUsingKeyFrames、ColorAnimationUsingKeyFrames、PointAnimationUsingKeyFrames

动画具备类似的属性，基本属性有：

①Duration：指定动画执行一次所须要的时间。默认值1秒。

②AutoReverse：动画播放结束时，是否向后播放。

③RepeatBehavior：动画播放的次数。默认状况下，只会播放一次。该属性有三种可能：持续时间、重复次数、永远。

④Storyboard.TargetName：指定为哪一个图形对象设置动画。

⑤Storyboard.TargetProperty：指定的图形元素的哪一个属性应用动画。

⑥FillBehavior：回归到起始位，如设置为Stop自动回归到起始位，默认值是HoldEnd，保持动画的位置于末尾不变。

⑦EventTrigger对象：具备一系列行为的触发器。

⑧BeginStoryboard对象：开始一个故事板中的动画。

基本操做步骤：

1）Expression Blend 中，打开或新建一个项目。

2）按 F6 切换到"动画"工做区。（按 F6 可在可用的工做区之间切换。在"动画"工做区中，"对象和时间线"面板位于美工板的下方。）建立要动态显示的任何对象。对象是指 Expression Blend 中的美工板上的项目。例如，若是您从"工具"面板中选择"矩形"，并在美工板上绘制矩形，则会建立一个矩形对象。

3）在"对象和时间线"面板中，单击"新建"。此时，将显示"建立情节提要资源"对话框。

4）在"资源名(关键字)"字段中，键入时间线的名称，而后单击"肯定"。Expression Blend 将进入时间线录制模式，而且播放指针位于 0 秒标记处。当处于录制模式中时，所设置的任何属性都将在该时间线上自动记录一个关键帧。

5）在"对象和时间线"面板中，选择要动态显示的对象。

6）若是但愿选定的对象从其当前位置和外观开始运行，请单击"记录关键帧"，以在 0 秒标记处记录该对象。将在与选定对象对应的行中的时间线上显示一个关键帧。

7）在"对象和时间线"面板中，将播放指针拖动到动画的结束时间点处。

8）若是但愿对象在动画结束和开始时的外观相同，请单击"记录关键帧"按钮。

9）将播放指针移到时间线上但愿属性发生改变的位置处。

更改选定对象的属性，例如对象的位置、颜色或大小。时间线上将自动显示一个用于记录属性更改的关键帧。

10）若要查看刚才建立的动画，可单击"对象和时间线"顶部的"播放"按钮。

范例滚动的球

建立一个来回滚动的球。

1 ）启动 Microsoft Expression Blend ，建 Silverlight 项目，并将其打开以供编辑。您如今便可在项目的主页 (MainPage.xaml) 中建立内容。

2 ）在 " 工具 " 面板中，选择其中椭圆形工具，如图图 11.3-1 。

图 11.3-1

3 ）美工板上，经过拖动鼠标在 MainPage.xaml 的设计界面中绘制一个椭圆，并在“属性面板”的布局中设置其下列属性，如图 11.3-2

Height=90 ， Width=300 ， StrokeThickness=0

如图 11.3-2

在按住 Shift 的同时进行拖动，可以使高度和宽度保持相同。这样作可在绘制矩形时生成正方形，在绘制椭圆时生成圆形。

在按住 Alt 的同时进行拖动，可将点击的第一个点做为中心点，而不是以该点做为所绘形状的左上角。

4 ）在“属性面板”的画笔下单击 Fill ，再单击“渐变画笔”标签，接着单击“径向渐变”画笔，见如图 11.3-3

如图 11.3-3

5 ）单击“工具箱”中的“渐变工具” ，将会看到一个渐变箭头，如图 11.3-6 。

11.3-6

6 ）鼠标调整渐变画笔的中心点，完成后效果以下图 11.3-7 ：

11.3-7

7 ）重复 8 ）、 9 ），再绘制一个椭圆，并设置其下列属性，完成后效果如图 11.3-8 ：

Height=70 ， Width=240 ， StrokeThickness=0

图 11.3-8

8 ）按住 Shift ，单击“工具箱”中的“选择”工具，选中两个椭圆。

9 ）在“对象”菜单上，单击合并、排斥。

若要将全部形状或路径均合并到单一对象中，请单击 " 相并 " 。

若要根据相交部分剪切形状或路径，但保留全部未相交部分，请单击 " 相割 "

若要保留对象的重叠区域并删除不重叠区域，请单击 " 相交 " 。

若要保留非重叠区域并删除重叠区域，请单击 " 相斥 " 。

若要删除最后选定的形状之外的其余全部选定形状，请单击 " 相减 " ，如图图 11.3-9 。

图 11.3-9

10 ）在 " 工具 " 面板中，选择其中椭圆形工具，在美工板上，经过拖动鼠标绘制一个圆，并设置其下列属性。

Height=30 ， Width=30 ， StrokeThickness=0

11 ）“属性面板”的画笔下单击 Fill ，再单击“渐变画笔”标签，接着单击“线性渐变”画笔，在下面的调色板中选择颜色，设置渐变颜色为黑到淡红。效果如图 11.3-10 ：

图 11.3-10

12 ） F6 切换到 " 动画 " 工做区，准备建立脚本（ Storyboard ）实现动画。

按 F6 可在可用的工做区之间切换。在 " 动画 " 工做区中， " 对象和时间线 " 面板位于美工板的下方。

13 ） " 对象和时间线 " 面板中，单击 " 新建 " ，此时，将显示 " 建立 Storyboard 资源 " 对话框，如图图 11.3-11 。

图 11.3-11

14 ）在 " 名称 ( 关键字 )" 字段中，键入资源的名称，而后单击 " 肯定 " 。

15 ） " 对象和时间线 " 面板中，选择圆。

16 ）击 " 记录关键帧 " ，以便记录在 0 秒播放点标记上的对象的当前位置处外观，如图图 11.3-12 。

图 11.3-12

17 ） " 对象和时间线 " 面板中，将播放点拖到 1s 的时间点上，移动圆到新的位置，

18 ）播放点拖到下一时间点上，不断重复，让圆绕一圈。

19 ）击 " 对象和时间线 " 顶部的 " 播放 " 按钮，可查看刚才建立的动画效果

20 ）击“对象和时间线”中打开的名称，此时属性面板会显示该脚本可供设置的属性，选中 AutoReverse ， RepeatBehavior 次数设为 2x 。

AutoReverse 属性设置为 True 时，动画播放结束时，会循着原来的轨迹逆向播放。

RepeatBehavior 属性用来决定动画播放的次数，如设置为 Forever 则为不断地重复播放

21 ）现已完成了动画的设计操做，会保存为 UserControl 的资源，可切换至 XAML 视图来查看，以下为自动产生的动画资源 XAML 代码。

<UserControl.Resources>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</UserControl.Resources>

22 ）启动动画：

Storyboard1.Begin ();

更详细内容及源代码下载：

http://www.amazon.cn/mn/detailApp/ref=sr_1_1?_encoding=UTF8&s=books&qid=1287058088&asin=B0043RT7I2&sr=8-1

零基础学通Silverlight4（5）：动画

5.1 动画特性

范例 滚动的球

范例滚动的球