动态显示对象

动画是通过快速播放一系列图像（其中每幅图像均与前一幅图像稍有不同）而产生的错觉。人脑将这一系列图像看作是一个不断变化的场景。在电影中，摄影机通过每秒记录大量照片（即，帧）来产生这种错觉。当放映机播放这些帧时，观众看到的是运动的图片。计算机动画与此类似，差别在于计算机动画可以在时间上进一步拆分记录的帧，因为计算机将内插并动态显示各帧之间的变化。

Expression Blend 中动画的工作原理

在 Microsoft Expression Blend 中，动画将基于定义平滑可视过渡的起点和终点的 关键帧 。若要在 Expression Blend 中创建动画，请创建一个 情节提要 ，然后在该情节提要中的 时间线 上设置关键帧，以标记属性更改。例如，可以在 0 秒标记处设置一个关键帧，以记录 rectangle 在美工板左侧的位置，然后在 1 秒标记处设置一个关键帧，以记录同一 rectangle 在美工板右侧的位置。将根据 rectangle 的 X 和 Y 属性在 1 秒内的转换来生成动画。在运行动画情节提要时，Expression Blend 将在指定的时间段中内插属性更改，并在应用程序中显示结果。通过这种方式，可以为美工板上的对象的任何属性（甚至包括非可视属性）生成动画。

在名为“MoveRight”的情节提要中的时间线上设置的关键帧，用于标记矩形对象的“X”和“Y”转换属性的更改

在某些计算机动画程序中，可以创建 逐帧 动画，这意味着每一帧都可以包含不同的图像（或对象）。所生成的动画可能会非常大，并且在运行时要占用大量资源。出于上述原因，Expression Blend 动画将基于记录属性更改的关键帧，并在运行时动态显示属性更改之间的过渡效果。此外，在 Expression Blend 中，所有需要在动画时间线期间显示或消失的对象在整个时间线期间均存在。但可以使用关键帧来更改对象的可见性属性，使其显示或消失。

注意：
虽然不能在 Expression Blend 的情节提要中自行创建新对象，但可以在 代码隐藏文件 中以编程方式生成新对象和新动画情节提要。有关详细信息，请参阅 MSDN 上“Windows Presentation Foundation”部分中的动画和计时  主题。

情节提要

情节提要是包含动画时间线的容器。Expression Blend 包含一个新的情节提要选取器控件，可以从中选择和搜索项目中的情节提要。

有关详细信息，请参阅打开或关闭情节提要。

列出了多个可打开的情节提要的情节提要选取器

选择了情节提要后，您可以使用一个弹出菜单来复制、反转、删除、重命名或关闭当前选定的情节提要，或者可以创建新的情节提要。

有关详细信息，请参阅复制或反转情节提要和重命名情节提要。

情节提要弹出菜单

可以设置情节提要的属性，使其在达到最后一个时间线的末尾后自动反转或重复。

有关详细信息，请参阅修改情节提要以重复或反转。

可在应用程序的以下位置（或范围）中创建情节提要：

• 在文档的主体中    如果应用程序的目的是显示动画，或者如果无需在其他位置重用动画，则可以在文档的主体中创建动画时间线。

  有关示例，请参阅创建简单动画。

• 在场景或用户控件中    如果必须在单个文档或另一个应用程序中多次重用动画，则可以在 用户控件 中创建动画时间线。如果希望将动画组织到不同的文档或项目中，这同样非常有用。用户控件也可以像其他任何控件（如按钮）一样添加到美工板上。有关详细信息，请参阅下面的“场景”一节。

  有关示例，请参阅创建空的用户控件或在项目中创建新用户控件。

• 在控件的模板中    如果希望应用程序中特定类型的所有控件（如按钮）均按照同一方式动态显示，则可以在控件的模板中创建动画。这并不表示所有控件的外观都必须完全一样。如果使用 模板绑定 （将模板中的属性绑定到应用该模板的控件中的属性），则在动画中，每个控件都可以具有不同的颜色或其他可视外观。

  有关详细信息，请参阅选择和使用交互控件。有关 Windows Presentation Foundation (WPF) 示例，请参阅动手试验：向按钮添加动画。

• 在某种状态下    如果要修改在过渡到某种新状态后出现的动画，您可以在“状态”面板中选择该状态，然后在“对象和时间线”面板中单击“显示时间线” 来进行更改。

  有关使用状态的详细信息，请参阅定义控件的不同视觉状态。

可通过使用为对象设置的触发器、使用行为或使用事件处理程序来控制（开始、停止、暂停）情节提要。

有关详细信息，请参阅运行情节提要时进行控制。

时间线

时间线可为应用程序中的动画序列提供组织结构。Expression Blend 中的动画由时间线组成，可在时间线上记录关键帧，以表示属性更改的时间设置。可将时间线视为应用于美工板上的对象的属性更改的层。时间线包含在情节提要中。

您可以在“对象和时间线”面板中处理动画时间线。可以使用此面板中提供的控件，查看随时间改变的美工板、添加新时间线、修改时间线等。

关键帧

关键帧 是时间线上的标记，用于指示何时发生属性更改。Expression Blend 中有以下四种关键帧：

• 对象级关键帧 ：应用于整个对象（例如 rectangle 对象）或包含多个对象的 grid 。通常，除非通过单击“记录关键帧”按钮来手动设置对象级关键帧，否则对象级关键帧将指示某个子对象的一个属性已更改，可通过展开该对象下的节点查看此属性更改。例如，在上图（位于本主题前面的“Expression Blend 中动画的工作原理”一节内）中，在与 Rectangle 对应的时间线上的行中设置的关键帧即为对象级关键帧。

• 复合关键帧 ：指示属性具有要进行动态显示的子属性。例如，在上图中，在与 Translate 属性对应的时间线上的行中设置的关键帧即为复合关键帧。可以使用复合关键帧来通过一次选择同时修改大量属性，例如在沿时间线移动关键帧时。

• 简单关键帧 ：表示在一个时间点发生单个属性更改。例如，在上图中，在与 X 和 Y 属性对应的时间线上的行中设置的关键帧即为简单关键帧。必须使用简单关键帧才能执行某些操作，例如修改动画的重复次数。

  有关示例，请参阅设置循环周期。

• 隐式关键帧 ：如果某一动画被另一动画中断并且第二个动画在 0 秒标记处未设置任何关键帧，则会显示隐式关键帧。在中断期间，Expression Blend 将动态显示一个属性的上一个已知值与第二个动画的第一个关键帧上设置的值之间的更改。上一个已知值将视为隐式关键帧，即使该值是第一个动画中两个关键帧之间的值也是如此。这种过渡效果称为 切换动画 。有关详细信息，请参阅下面的“使用多个重叠的动画时间线”一节。

了解关键帧之间的差别非常有用，因为您可能并不总是需要了解动态显示的每个属性的详细信息。而可以将每个对象的属性折叠起来，并仅查看对象级关键帧。可以使用对象级关键帧和复合关键帧，以便通过一次选择同时修改大量属性，例如在沿时间线移动关键帧时。

有关示例，请参阅粘贴或移动关键帧。

必须使用简单关键帧才能执行某些操作，例如修改动画的重复次数。

有关示例，请参阅设置循环周期。

关键帧之间的过渡

关键帧内插 描述了如何在两个关键帧之间的时间范围内动态显示属性更改。

通过选择预定义的“渐入”或“渐出”值、修改“KeySpline”图形，或使用预设的“EasingFunction”选项（表示复杂的“KeySpline”图形），您可以修改关键帧内插值。

用于在关键帧之间创建自定义内插的主曲线编辑器

有关详细信息，请参阅更改关键帧之间的动画内插方式。

手动或使用运动路径创建时间线

注意：
Microsoft Silverlight 项目中不支持运动路径。

通过手动创建动画时间线，可以更好地控制时间线动态显示的对象的数量和运动方式。也可以在颜色之间进行动态显示。若要在 Expression Blend 中手动创建动画时间线，请在“对象和时间线”下单击“新建”，然后通过先移动时间线播放指针 ，再修改美工板上的对象以生成关键帧，从而记录关键帧。

有关示例，请参阅创建简单动画。

通过使用“转换为运动路径”工具来自动生成动画时间线，可以使对象沿美工板上的路径移动，而不论该路径是线还是形状（如椭圆行或矩形）的边界。如下图所示，椭圆的圆周将成为蓝色圆的运动路径。

使用运动路径创建动画时间线

	两个独立的对象：一个 ellipse 和一个 circle （使用“椭圆形”工具创建）。
	ellipse 成为运动路径。此时可以选择删除 ellipse 。
	将生成一条新时间线，在播放该时间线时，将沿椭圆形路径移动 circle 。

有关如何使用运动路径来生成动画时间线的示例，请参阅创建、修改或删除运动路径。

在时间线上，运动路径不用关键帧来表示。因此无法修改内插效果。但可以修改重复次数。

有关详细信息，请参阅设置循环周期。

也可以使动画对象在整个时间线上不断地适应路径，以便指向路径中心的对象的任意一侧将继续指向路径中心。

有关详细信息，请参阅创建、修改或删除运动路径下的“使运动对象自身不断地适应路径”

在生成运动路径之后，可以手动向包含运动路径的同一时间线中添加动画。

注意：
您不能通过反转包含运动路径的情节提要来反转 Expression Blend 中的运动路径。但是，您可以转换（翻转）路径以使其反向运行，或者可以使用“AutoReverse”情节提要属性来使情节提要向前播放然后反转。

使用多个重叠的动画时间线

Expression Blend 中的情节提要结构允许在应用程序中同时运行多个情节提要（和多个时间线）。例如，可以绘制两个圆来代表蝴蝶，创建一个表示蝴蝶沿圆形运动路径移动的动画时间线，然后创建一个表示扇动翅膀的单独的动画时间线。扇动翅膀的动画可以与圆周动画同时运行而不中断圆周动画，这是因为这两个时间线并没有动态显示蝴蝶对象的相同属性。

有关示例，请参阅动手试验：创建重叠的动画。

如果两个动画时间线同时动态显示同一属性，则根据是否为第二个动画在 0 秒标记处记录关键帧，时间线之间的过渡效果会有所不同。如果未在 0 秒标记处记录关键帧，Expression Blend 会假定您希望从该属性在中断时的最后一个值动态变化到第二条时间线中第一个关键帧处该属性的值。这种过渡效果称为“切换动画” ** 。例如，假设有这样一个圆：在一个时间线中将其宽度拉伸为两倍，而在第二个时间线中将其宽度拉伸为四倍。如果第二条动画时间线中断了第一条动画时间线，并且未在 0 秒标记处设置关键帧，则该椭圆将从中断第一条时间线的时间点开始平缓扩展，直到达到第二条时间线的终点（宽度变为原始宽度的四倍）。如果第二条动画时间线不是切换动画（如果在 0 秒标记处设置了关键帧），则该圆将突然跳到第二个动画的起点。

有关示例，请参阅动手试验：尝试切换动画和非切换动画。

注意：
如果两个时间线动态显示对象的同一属性，则第一个时间线将在被中断时停止，即使该时间线已设置为永久重复也是如此。

帧速率

Expression Blend 中的动画是通过沿时间线设置关键帧来创建的。而关键帧之间的内插是在运行时执行的。因此，无需配置动画的 帧速率 。在运行应用程序时，.NET Framework 运行时会以可能达到的最高帧速率来呈现动画时间线。

但是，可以指定在时间线上设置关键帧的间隔。此间隔速率称为 对齐分辨率 ，因为它是指播放指针 或关键帧 对齐到位。例如，如果将对齐分辨率改为每秒 10 关键帧，则可以沿时间线每隔十分之一秒设置一个关键帧。若要更改对齐分辨率，请在“对象和时间线”下，单击对齐切换按钮 旁边的下拉箭头，然后单击“对齐”以显示“对齐分辨率”对话框。

场景

在 Expression Blend 中，可以将动画封装在场景（或用户控件）中，然后在应用程序的其他文档中多次使用这些动画。可以在单个文档或 .dll（控件库）文件中创建用户控件。您可以从“资产”面板 的“项目”类别中访问应用程序中包含的所有用户控件，然后将其绘制到文档中，就像操作其他任何控件一样。

注意：
向项目中添加用户控件后，必须生成项目，才能使用户控件显示在“资产”面板中。在“项目”菜单上，单击“生成项目”。

当规划在用户控件中动态显示的容时，请考虑下列事项：

• 各个动画的时间设置    例如，考虑这样一个应用程序：先动态显示一个闪屏，然后动态显示逐渐淡入的用户界面。可以将每个动画放入各自的用户控件中，但在第二个动画的开头留出足够的时间，以便完成闪屏动画。

• 希望用于动画的属性和触发器    例如，考虑这样一个应用程序：包含一个按钮和一个包含在用户控件中的动画。除非按钮也包含在用户控件中，否则不能向该用户控件中添加将在单击该按钮时开始动画时间线的触发器。此外，只有两个属性都包含在同一用户控件中时，才能在它们的值之间建立数据绑定。

  注意：
  Silverlight 项目中不提供触发器。但是，您可以使用行为来控制情节提要和状态过渡。 有关详细信息，请参阅使用行为。

有关用户控件的详细信息，请参阅创建空的用户控件，或参阅运行情节提要时进行控制中的“用户控件中的情节提要”。

测试情节提要

可以在创作环境中，也可以在编译应用程序（单击“项目”菜单上的“运行项目”，或者按 F5）时的运行时环境中，通过各种方式测试 Expression Blend 项目中的情节提要。在创作环境中时，可以使用位于“对象和时间线”面板中的播放控件：

“对象和时间线”面板中的播放控件

• 第一帧    将播放指针 移到动画的第一帧。

• 上一帧    将播放指针移到上一帧。

• 播放    从当前时间点开始播放动画。

• 下一帧    将播放指针移到下一帧。

• 最后一帧    将播放指针移到动画的最后一帧。

推移时间线

推移时间线是一种有用的技术，可用于精确控制要预览或测试的动画的速度和位置。推移操作通过拖动播放指针来完成。在拖动播放指针时，可以在美工板上查看动画。可以正向或反向推移各帧。动画的播放速度取决于拖动播放指针的速度。

有关示例，请参阅推移时间线。

时间对齐

“对象和时间线”面板中包含一些控件，可用于按照由对齐分辨率决定的离散单位（每秒帧数）控制动画的播放以及时间定位。在使用播放控件沿时间定位时，会使用时间对齐。在单击下一帧和上一帧按钮时，播放指针会按照指定的每秒帧数向前或向后移动。此时间量由对齐分辨率决定。

“对齐分辨率”对话框

有关使用对齐分辨率的示例，请参阅启用或禁用时间线对齐和更改对齐分辨率。

注意：
在应用程序运行时，不会对帧速率或动画速度应用时间线对齐。有关详细信息，请参阅本主题前面的“帧速率”。

时间显示

当前时间显示以 MM:SS:xxx（分、秒、毫秒）格式显示当前选定的时间点。若要快速跳到特定的时间点，可以在此字段中输入数值，以直接跳到该时间点。

“播放指针位置”文本框，读数为 1.450 秒

有关使用时间显示的示例，请参阅转到时间线中的特定时间点。

触发器

使用 触发器 可更改美工板上对象的状态，以响应事件或属性的更改。可以使用触发器来开始和停止动画时间线。例如，在创建时间线时，会创建一个默认触发器，该触发器将在应用程序首次加载时运行该时间线。可以修改此触发器或创建其他触发器，以便在用户单击按钮或执行其他操作时运行该时间线。

有关触发器的详细信息，请参阅使用触发器定义 WPF 控件的行为。

注意：
Silverlight 项目中不提供触发器。但是，您可以使用行为来控制情节提要和状态过渡。 有关详细信息，请参阅使用行为。

事件处理程序

事件处理程序是由用户编程设计的方法，可在发生指定的事件（如 MouseOver ）时运行。如果必须执行的操作不仅限于在应用程序中发生事件时设置属性或控制动画时间线，则可以使用事件处理程序来代替触发器。可以使用事件处理程序方法添加其他编程逻辑，例如，设置另一个对象的属性、加载新文档、创建新对象、使用数学计算来动态显示对象等。例如，如果希望在 KeyDown 事件期间确定按下的键，则可能必须创建一个将在按键时调用的事件处理程序方法，并添加代码以确定按下的键。

事件处理程序方法在文档的代码隐藏文件中定义。在 WPF 或 Silverlight 项目中，代码隐藏文件是用 Microsoft Visual C# 或 Microsoft Visual Basic .NET 编写的。

有关示例，请参阅在时间线中使用触发器控制媒体和动手试验：在 Silverlight 应用程序中动态加载新网页。

编程动画

在 Expression Blend 的“设计”视图中工作时，可以创建整个动画时间线，而无需修改代码隐藏文件中的 XAML 或代码。也可以配置触发器，以便基于用户交互开始、停止和暂停动画时间线。您几乎能够在 Expression Blend 的“设计”视图中执行所需的全部动画任务。

某些高级动画方案需要编写代码（使用 C# 或 Visual Basic .NET），例如，使用数学计算来确定对象的移动。如果计划在代码隐藏文件中操作动画时间线，则了解应用程序所使用技术（WPF 或 Silverlight）的动画模型会很有帮助。

在 XAML 中，动画时间线是用 STORYBOARD 元素表示的。例如，在 Expression Blend 的“设计”视图中创建动画时间线时，为动画生成的 XAML 代码可能如下所示：

<Window.Resources>
  <Storyboard x:Key="MoveRight">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="rectangle"
        Storyboard.TargetProperty="...(TranslateTransform.Y)">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="00:00:01" Value="375"/>
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>
</Window.Resources>

上述 XAML 示例的属性如下所示：

• x:Key 属性指定时间线（或情节提要）的名称。

• BeginTime 属性指定动画的开始时间（在本例中为 0 秒标记处）。

• TargetName 属性指定情节提要（或时间线）动态显示的元素的名称（在本例中是名为“rectangle”的对象）。

• TargetProperty 属性指定将发生更改的属性（在本例中为 rectangle 的 Y 位置属性）。

• KeyTime 属性指定目标属性发生更改的时间间隔以及要更改为的值。在 Expression Blend 的“设计”视图中，这些元素由时间线上的关键帧表示。

可以在代码隐藏文件中，使用 C# 或 Visual Basic .NET 编写代码来控制动画时间线。例如，若要在代码隐藏文件中开始上一个动画时间线，C# 代码可能如下所示：

Storyboard moveRight;
moveRight = (Storyboard)this.Resources["MoveRight"];
moveRight.Begin(this);

有关如何在 XAML 和代码隐藏文件中创建并操作动画时间线的详细信息，请参阅 MSDN 上“Windows Presentation Foundation”部分中的动画和计时  主题，或者参阅 Microsoft Expression  网站上发布的示例和教程。

Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。