添加交互性

建模交互性（用户和应用程序之间的交互）可帮助演示用户与应用程序交互可采用的各种方式。Microsoft Expression Blend 提供了多种不同的工具来演示原型的交互行为。例如，您可以执行任何以下操作：

• 通过使用动画来模拟交互行为。

• 向原型中的元素添加导航。

• 使用示例数据和数据绑定创建数据驱动用户界面的原型。

• 向原型中的元素应用行为。

有关向 SketchFlow 项目中添加交互性的详细信息，请参阅 Getting Started with SketchFlow（SketchFlow 入门）

动画

有时，向原型中添加动画序列来演示交互将非常有用。您可以使用关键帧动画工具（例如“对象和时间线”面板中的工具）、使用“状态”面板，或使用“SketchFlow 动画”面板来创建简单的动画序列。

有关使用状态的详细信息，请参阅本主题后面的“可视状态”。

关键帧动画

您可以使用 Expression Blend 中的关键帧动画工具在 SketchFlow 项目的任何屏幕中创建动画序列。可以将关键帧动画与可视状态配合使用（例如，在进入某种状态时触发的动画），或单独使用它们（例如，在动画由操作触发时）。

有关在 Expression Blend 中创建动画的详细信息，请参阅动态显示对象。

在 Windows Presentation Foundation (WPF) 应用程序中，您还可以使用运动路径来创建动画序列。有关详细信息，请参阅创建、修改或删除运动路径。

SketchFlow 动画

关键帧动画可能非常有用。但是，关键帧动画也可能过于详细，从而超出原型项目的范围。SketchFlow 动画是一些情节提要样式的演练，可以在“SketchFlow 动画”面板中快速轻松地创建。与关键帧动画和状态一样，SketchFlow 动画可以帮助演示用户交互。

在 SketchFlow 动画中，将使用“SketchFlow 动画”面板，通过向该面板中添加新帧，然后在美工板上为该帧调整“场景”，从而创建一系列快照。您可以轻松地调整每个帧之间的过渡时间以及每个帧的持续时间。可以通过在“SketchFlow 动画”面板中单击“播放”，在文档窗口中直接播放动画序列，或者可以通过按 F5 生成并运行项目，然后在 SketchFlow 播放器中播放动画。

下面是一个 SketchFlow 动画示例。在下面的帧中，指针从右下角移到 Halo 2 图像上，然后用一个红色星形模拟单击操作。Halo 2 图像随之向左移动，并且指针向右移动。

创建 SketchFlow 动画

1. 打开要向其中添加动画的屏幕。在“SketchFlow 动画”面板中，单击“新的 SketchFlow 动画”，创建一个新的 SketchFlow 动画。一个新帧将出现在“SketchFlow 动画”面板中。

   说明：
   如果看不到“SketchFlow 动画”面板，请在“窗口”面板中单击“SketchFlow 动画”。

   在本例中，“Base”状态（屏幕的正常状态）与第一帧相同。

2. 通过在第一帧中单击“添加状态” 来添加一个新帧。

3. 选择要移动的对象，并将其移到想要其出现的位置。在本例中，指针从右下角移到“Halo”中的字母“o”处。

   

4. 您可以通过将指针悬停在帧上直至出现“编辑持续时间”对话框，从而为帧修改持续时间（当前状态显示的持续时间）。可以在帧内双击并键入新值，或者单击一次并使用向上键和向下键来增长或缩短持续时间。

5. 您可以通过在帧之间单击，使用出现的“编辑过渡时间”对话框来修改帧之间的过渡时间（从一个帧到另一个帧的过渡完成所花费的时间）。可以在帧内双击并键入新值，或者单击一次并使用向上键和向下键来增长或缩短过渡时间。

6. 完成了 SketchFlow 动画后，可通过执行下列操作之一来预览动画：

   • 在 SketchFlow 工具栏中单击“播放”。

   • 右键单击美工板，单击“播放 SketchFlow 动画”，然后选择要播放的动画。

   • 通过按 F5 生成并运行项目，然后在 SketchFlow 播放器中观看动画。

SketchFlow 动画工具栏

您可以使用“SketchFlow 动画”工具栏在“SketchFlow 动画”面板中执行下列操作：

	转到第一帧。
	播放动画。
	锁定时间编辑器。
	启用或禁用流动布局。 有关详细信息，请参阅在布局更改之间平稳过渡。
	使用箭头从下拉列表中打开 SketchFlow 动画。 使用加号图标以添加新的情节提要。 使用单箭头以创建、删除或关闭情节提要。
	使用滚动条以在各个动画帧之间移动。

可视状态

您也可以通过使用可视状态为单个屏幕定义不同的设计替代项，从而在原型中演示交互性。在许多不同的方案中，为单个屏幕使用多个状态对于创建原型可能非常有用，示例包括：

• 视用户是否已登录而定，应用程序中的屏幕可显示不同的用户界面 (UI) 元素。您可以使用可视状态在原型中创建单个屏幕的两个显示选项：一个用户已登录的显示选项，以及一个用户未登录的显示选项。原型中的给定屏幕可以有不同的设计替代项。可以为相同屏幕中这些不同设计替代项中的每一项创建状态。

• 由于状态可以包含动画，因此可以为相同屏幕创建不同的状态，并包括动画。然后，可以通过显示包含动画的屏幕的状态来触发状态中的动画。

在 SketchFlow 播放器中运行 SketchFlow 项目时，状态在“导航”面板中将显示为单独的命令。在下图中，“过渡”是状态组，而“关闭”和“打开”是为屏幕定义的两个不同状态。

由于可以使用命令在状态之间导航，因此不必创建触发器在您已在美工板上创建的状态之间切换。

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

行为

行为是一些内置代码段，您可以快速轻松地将这些代码段应用于元素以创建交互功能。行为可以很简单，就像在事件发生时触发的操作一样（例如，在单击按钮时，动画开始播放），或者，行为可以封装由多个操作触发的多个事件。

行为是用于生成原型的强大工具。例如，您可以向屏幕中添加控件，然后将行为应用于该控件。然后，您可以（按 F5）生成并运行项目，而您为其添加了行为的控件在屏幕上的行为方式就像在最终应用程序中一样。

内置的 SketchFlow 行为包括“后退”和“前进”导航，并且还包括一个可应用于 SketchFlow 中的控件的“导航到”行为。

有关详细信息，请参阅向对象中添加行为。

导航和状态更改

在 SketchFlow 播放器中查看原型时，您可以通过使用“导航”面板在屏幕之间导航并触发状态更改。此功能意味着您无需添加任何额外的代码或 UI 元素即可在原型中导航，即使原型仅包含少量粗糙的草图也是如此。

对于您已绘制在美工板上，并且使您能够在屏幕之间导航或播放已添加到原型的动画的 UI 元素，您也可以快速轻松地将 SketchFlow 行为添加到这些元素。

为控件添加“播放 SketchFlow 动画”行为

• 右键单击要向其中添加“播放 SketchFlow 动画”行为的控件，单击“播放 SketchFlow 动画”，然后单击要在单击该控件时播放的动画。

示例数据

许多应用程序都依赖于数据库来生成信息。如果没有实际数据来建立原型，则很难建立数据驱动行为的模型。利用 Expression Blend，您现在可以创建示例数据源，然后将该数据绑定到控件。您可以在原型中使用示例数据，以便建立数据驱动用户界面的模型，该模型将对真实的数据驱动用户方案的动态特性进行模拟。

有关详细信息，请参阅创建示例数据。