动手试验：创建重叠的动画
Expression Blend 中的时间线结构允许在应用程序中同时运行多个动画时间线。以下操作步骤显示了如何创建这样一个动画：一只蝴蝶不停地绕圈移动，而当用户的鼠标移到蝴蝶上时它会扇动翅膀。
创建重叠的动画
在 Microsoft Expression Blend 中，打开一个现有项目或创建一个新项目。有关详细信息，请参阅创建新的文档或项目。
按 F6 切换到动画工作区。（按 F6 将在“设计工作区”和“动画工作区”之间进行切换。在“动画工作区”中，“交互”面板位于美工板的下方。）
在“对象和时间线”下，选择“关闭 Storyboard”
.png "Cc294767.4c066464-3a41-452d-b2e9-e95f6c5659ff(zh-cn,Expression.10).png")
按钮。.gif "说明")
说明：只要选择了“默认值”时间线以外的时间线，对属性所做的任何更改都将在该时间线上自动记录一个关键帧。
从工具箱中选择“椭圆形”
.png "Cc294767.d7a04618-e35a-44f9-b78c-1f22e38016c1(zh-cn,Expression.10).png")
工具。在美工板右侧绘制两个小圆。可以在“属性”面板的“布局”类别下，将“Height”和“Width”属性设为相同值，使椭圆成为标准的圆。如果出现了剪切情况，请调整“Margin”属性。从工具箱中选择“选择”
.png "Cc294767.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-cn,Expression.10).png")
工具，将两个圆相互靠近，如下图所示：在美工板上绘制两个圆
.png "Cc294767.9d303fc9-9be5-4904-a740-28ed53f85fdc(zh-cn,Expression.10).png")
若要同时使用两个圆，请在“对象和时间线”下选择一个圆，按住 Ctrl 键以便可以选择另一个圆，右键单击选定的圆，选择“分组”，然后单击“网格”。
在“对象和时间线”下将显示一个新的网格面板，其中包含这两个圆。
通过右键单击该网格，然后选择“重命名”可重命名该网格。将其名称更改为“Butterfly”。
若要创建圆周动画，可以使用“转换为运动路径”工具，从路径生成动画时间线。在美工板中央绘制第三个椭圆，其宽度约为美工板图面宽度的一半。
在“对象和时间线”下选定新椭圆，选择“对象”菜单上的“路径”，然后单击“转换为运动路径”。
此时，将显示“选择运动路径的目标”对话框。
从美工板上的对象列表中选择“Butterfly”网格，然后单击“确定”。
将创建新的时间线。Expression Blend 将进入新时间线的录制模式，以便可以单击“播放”
.png "Cc294767.64ad8e84-1eec-4154-9d0c-11fef322c0bf(zh-cn,Expression.10).png")
按钮在美工板上查看动画。目标 (Butterfly) 将沿从椭圆生成的运动路径移动。请注意，如果已将椭圆的“Fill”属性设置为一个画笔，则它将覆盖部分 Butterfly 对象。现在已经不再需要第三个椭圆了，因此请将其删除。
在“对象和时间线”下，依次展开“Butterfly”、“RenderTransform”和“Translation”元素的节点，以便可以查看“运动路径”时间范围。右键单击“运动路径”元素或代表时间范围的灰色条，然后单击“编辑重复次数”。
此时，将显示“编辑重复”对话框。
若要使时间线不停地重复，请单击“设置为永久”
.png "Cc294767.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(zh-cn,Expression.10).png")
按钮，然后单击“确定”。现在，当此动画运行时，就会无限循环。
在“对象和时间线”下，单击“新建”
.png "Cc294767.86937695-03dd-44ea-aa30-28d4029b3ad0(zh-cn,Expression.10).png")
按钮。此时，将显示“创建 Storyboard 资源”对话框。
在“资源名(关键字)”字段中，输入名称“Flap”，然后单击“确定”。
Expression Blend 将进入新时间线的时间线录制模式，并且播放指针
.png "Cc294767.5626c9eb-40bb-450a-9ca1-3678e5abe429(zh-cn,Expression.10).png")
位于 0 秒标记处。在录制模式下时，所设置的任何属性都将在该时间线上自动记录一个关键帧。若要在 0 秒位置处设置关键帧，请选择“Butterfly”网格，并单击“记录关键帧”
.png "Cc294767.de094a9c-58f2-4466-912a-9bdc18362548(zh-cn,Expression.10).png")
按钮。与“Butterfly”网格对应的行中的时间线上会显示一个关键帧
.png "Cc294767.80da70bb-e635-42e8-b26d-f90453096e21(zh-cn,Expression.10).png")
。将播放指针拖动到 1 秒标记处，然后记录另一个关键帧。
现在已设置动画的开始位置和结束位置。
将播放指针拖动到介于前两个关键帧之间的 0.5 秒标记处。
从工具箱中选择“选择”工具，按住 Alt 键，然后在美工板上将“Butterfly”网格的高度拉长并将其宽度缩小，使其看起来如下图所示。
因为 Expression Blend 处于 Flap 动画时间线的录制模式，所以网格修改操作将在 0.5 秒标记处为网格的“ScaleX”和“ScaleY”属性设置新的关键帧。
在美工板上拉伸圆的网格
.png "Cc294767.a6857649-160b-446f-b998-a135389a19be(zh-cn,Expression.10).png")
在“对象和时间线”下，展开“Butterfly”网格的节点，直到显示“ScaleX”和“ScaleY”节点。对这两个节点依次执行下列操作：选择节点，右键单击该节点，选择“编辑重复次数”，然后在“编辑重复”对话框中输入 2 以使时间线运行两次，再单击“确定”。
单击“播放”按钮，在美工板上测试动画。请注意，在美工板上播放时，不会应用指定的重复次数值。如果希望调整动画的时间设置，可以在灰色的时间范围条上移动关键帧。
说明：如果没有足够的空间查看整个时间线，可以使用“时间线缩放”文本框缩小该时间线。也可以更改面板的宽度，以便查看“对象和时间线”面板的更多内容。
现在便可以为动画设置触发器。若在文档的根中创建任何新时间线，都将导致在“触发器”下为应用程序启动时发生的“Window.Loaded”事件添加一个默认的事件触发器。
可以将该触发器用于圆周时间线，而为 Flap 时间线添加一个新触发器。
在“触发器”下，选择“Window.Loaded”触发器。该触发器的操作会显示在“在引发 Window.Loaded 时”下。单击“Flap.Begin”旁边的减号以删除该操作。
现在，在应用程序启动时，圆周动画仍会开始运行，而 Flap 动画不会运行。
说明：可能需要调整“触发器”窗格的大小，才能看到“活动时的属性”部分。若要调整其大小，请单击并拖动该窗格的边框以及该窗格内的边框。
从 Window.Loaded 触发器中删除 Flap 动画
.png "Cc294767.7f6ed2c1-373a-4bf1-8008-0380917c618d(zh-cn,Expression.10).png")
若要为 Flap 动画添加触发器，请单击“触发器”下的“添加事件触发器”
.png "Cc294767.671c69bb-32e9-4ef9-9837-29403524abd0(zh-cn,Expression.10).png")
按钮。将创建一个新的“Window.Loaded”触发器。
选择“对象和时间线”下的“Butterfly”网格元素，然后在“触发器”下，使用下拉框将新的触发器从“在引发 Window.Loaded 时”改为“在引发 Butterfly.MouseEnter 时”。
单击“在引发 Butterfly.MouseEnter 时”旁边的“添加新操作”
.png "Cc294767.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(zh-cn,Expression.10).png")
按钮，然后使用下拉框将新操作更改为“Flap.Begin”。现在，当用户将鼠标光标移到蝴蝶上时，Flap 动画时间线将开始运行。
为网格的 MouseEnter 事件创建新触发器
.png "Cc294767.c0eee764-9e82-492e-92a8-5540d15c3abe(zh-cn,Expression.10).png")
若要查看动画时间线和刚才创建的事件触发器的行为，请单击“项目”菜单上的“测试项目”，对场景进行测试。
说明：如果圆周动画的运行速度太快，可以调整时间线的运行时间。在“对象和时间线”下，从下拉框中选择该运动路径时间线，展开网格下的节点，直到显示“运动路径”节点，抓取灰色时间范围条的右端，并将其向右拖动以延长结束时间。
或者，也可以删除圆周时间线，创建新的时间线，然后从步骤 8（绘制椭圆）开始来创建运动路径。（如果不在步骤 8 开始之前创建时间线，则圆周动画将添加到 Flap 动画时间线中。）