Silverlight 4 PathListBox 控件入门指南 (第二部分)

• 下载 PathListBoxDemo-II - 468.23 KB

引言

在我上一篇文章“Silverlight 4 PathListBox 控件入门指南 (一)”中，我描述了如何在 Silverlight 应用程序中创建第一个 PathListBox 控件，然后创建圆形路径来定位边缘的项目。从那篇文章开始，我想您现在应该已经熟悉它了。

在本篇文章中，我将演示如何沿特定方向为项目添加动画。这不仅可以指导您在 PathListBox 中进行动画设置，还可以帮助您理解 StoryBoard 的创建（如果您是 Silverlight 新手）。阅读全文，最后别忘了留下您的评论。

为动画创建 Storyboard

让我们开始为之前的示例应用程序创建一个 Storyboard。在这里，我们将旋转我们的圆形路径，当路径旋转时，圆形路径上的项目也会旋转。在 Expression Blend 中创建 Storyboard 非常容易，因为它为 UI 提供了更多功能，因此我们将在这里使用 Blend 来设计我们的动画。

请按照以下步骤了解 storyboard 动画并开始示例：

1. 选择名为“path”的 Path 控件。
2. 现在，如下图所示，单击“Objects and Timeline”部分下方的“+”图标下拉菜单。这是在 Silverlight 中创建动画的选项。为什么是 Silverlight？此选项在 WPF 应用程序中也可用，用于创建 Storyboard。
3. 在 下拉菜单 中，您会看到一个名为“New…”的选项。单击它。

单击下拉菜单中的“New…”选项后，将打开一个名为“Create Storyboard Resource”的对话框。其中有一个 TextBox，您可以在其中输入 Storyboard 的名称。在我们的示例中，我们将其命名为“sb_RotatingItems”。单击“OK”继续。

在时间轴中创建关键帧

以上步骤将为您创建一个空白动画。现在，是时候为动画添加视觉效果了。您会注意到创建的 Storyboard 已经选择在左侧面板中，并且在 UI 设计面板中，它被一个红色边框包围。这意味着您现在可以在设计窗口中修改 storyboard。您在 UI 中所做的任何更改都将包含在动画中。

对于我们的示例，我们希望以圆形方式旋转它。所以，让我们开始创建动画。请按照下面提到的简单步骤进行，并尝试清晰地理解每一个步骤。如果您有任何疑问，请使用下面的评论/反馈表。我会尽快回复您的疑问。

1. 在这里，您会看到一个红色的圆形图标（步骤 1 和步骤 2）。这表示 storyboard 处于编辑模式。在此编辑模式下，您所做的任何操作都将反映在您的动画中。
2. 在快照的步骤 2 中，您会在时间轴中看到一个黄色标记。用于将时间轴向前或向后移动。

让我们稍微放大一下。您会注意到时间轴中有以下按钮。还有更多按钮，但在创建/修改 Storyboard 时，以下按钮更有用。

1. 现在看步骤 1，时间轴中有一个带“+”号的椭圆。这是在时间轴中创建 KeyFrame 的。
2. 在步骤 2 和步骤 3 中有五个按钮可用。第一个按钮将时间轴的黄色导航器定位到第一个位置。第二个按钮将导航器向后移动一步。第三个按钮播放当前动画。第四个按钮将导航器向前移动一个关键帧。最后一个按钮可用于将导航器移动到 storyboard 的最后一个 keyframe。

让我们为我们的 Storyboard 创建一个新的 Keyframe（在零位置的第一个）。

1. 选择添加到 Grid 中的 Path 控件，然后单击“Record Keyframe”按钮，在零时间轴中添加一个新帧。请确保黄色导航器位于零位置。
2. 这将在选定的 Path 控件的导航器相同位置添加一个空白 keyframe。

现在我们的第一个 Keyframe 已经准备就绪，是时候在特定持续时间内进行一些动画了。我们将执行 5 秒。您可以在时间轴中使用任意时长的持续时间。

1. 将导航器拖动到第 5 秒。您也可以使用下一个 Keyframe 按钮将导航器移动一个帧的位置。
2. 再次单击“Record Keyframe”按钮。这将在时间轴中添加一个新的 Keyframe。
3. 您会注意到这两个 keyframes 由一个选择连接。请参见下面的快照。

向 Storyboard 添加动画

现在是时候将动画添加到 Storyboard 时间轴了。请确保最后一个 keyframe 在时间轴面板中被选中。我们将在该帧中进行旋转。由于我们的第一帧是空白的，它将创建一个从该 keyframe 到最后一帧的动画，以完成旋转。

1. 转到 Path 控件的属性面板，然后展开“Transform”框架。
2. 在那里您会找到另一个名为 Rotate 的选项卡。单击此项，它将打开选项卡内容。
3. 在名为 degree 的 Textbox 中，输入旋转角度的数值。如果输入正值，它将顺时针旋转；如果输入负值，动画将逆时针发生。在我们的情况下，我们可以使用“360”，因为我们需要一个完整的旋转。这将执行顺时针旋转。

由于我们需要逆时针完整旋转圆形路径及其内容，请将“-360”作为值输入到 degree 输入框中。

现在，我们在这里创建的动画将只执行一次旋转然后停止。但是，我们需要一个无限循环的旋转。请按照以下步骤为动画添加重复次数：

1. 在“Objects and Timeline”面板中，查找 Path 控件附近。您会看到它可以展开。单击小箭头展开控件的内容。
2. 您将看到“RenderTransform”是直接子项，然后“Rotation”是其同级项。
3. 右键单击“Rotation”项将打开一个名为“Edit Repeat Count”的上下文菜单。

单击“Edit Repeat Count”上下文菜单项将打开一个名为“Edit Repeat”的对话框。

1. 在这里，在新打开的对话框中，您可以在“Repeat” textbox 的值中输入任何数字。如果您输入 5，动画将连续运行 5 次。右侧还有一个名为“Set to forever”的按钮。单击它会将动画设置为无限循环。
2. 单击“Set to forever”后，它会将 Repeat 属性的值设置为“Forever”，并显示在旁边的 TextBox 中。
3. 单击“Ok”保存对 Storyboard 所做的更改。

现在查看下面的快照，在 Storyboard 名称和“Add new Storyboard”菜单附近有一个名为“Close Storyboard”的按钮。单击它将关闭 Storyboard，并将动画从编辑模式恢复到正常模式。

您会看到一个箭头位于“Close Storyboard”按钮附近。单击它将打开一个搜索面板，其中将列出附加到页面的所有 storyboard。

XAML 知识

我们的 storyboard 已经准备好了。但是 Blend IDE 在 XAML 页面上做了什么？让我们来看看。

您会注意到它将一个 Storyboard 添加为 UserControl 的 Resource，其中有一个 DoubleAnimationUsingKeyFrames 作为子项。它正在定位名为“path”的 UI 控件的 RenderTransform 的 Rotation 属性。RepeatBehavior=”Forever” 表示动画的循环次数。在这里它将是无限的。如果您在此处输入 5，它将只调用动画 5 次。

稍后，您将看到 XAML 中有两个帧。我们在最开始添加的第一个 Keyframe 的值将是“0”，而放置在 5 秒持续时间之后的最后一个帧的值将是“360”。从这一点，您可以清楚地理解动画将从第 0 个时间轴开始，以 0 度角变化开始，并在 5 秒后以 360 度角结束。

让我们更多地了解名为“path”的 UI 控件。您会看到它有一个名为 CompositeTransform 的子项，包裹在 RenderTransform 中。这确保了您可以获得平滑的动画效果，无论是控件的缩放、旋转、倾斜还是 TranslateTransform，即控件的定位。“CompositeTransform”将具有在 Storyboard 中定义的动画的混合行为。

从代码中调用 Storyboard

如您所知，我们的 XAML 代码已准备就绪，但如果您现在运行应用程序，动画将不会运行。我们需要调用 Storyboard 来运行。为此，我们首先必须通过指定 storyboard 名称作为 Key 来从页面 Resource 中获取 Storyboard 的引用。然后，我们必须调用 Begin() 方法，该方法实际运行动画。看代码。在此示例中，我将代码添加到构造函数中。但根据您的需要，您可以将其放置在代码块的任何部分。

演示

现在运行您的应用程序，您将看到圆形路径开始逆时针旋转。不仅如此，它还开始旋转圆形路径边缘上的项目。

结束语

这是 Storyboard 创建的一个小型演示，全面涵盖了使用新的 PathListBox 控件在指定路径的任何方向上为任何内容控件添加动画。希望这篇文章对 Silverlight 初学者有所帮助，让他们对 Storyboard 有一些基本了解。请将其加入书签并与所有需要学习的人分享。

另外，别忘了留下您的评论/建议，因为这有助于我通过提供带有正确步骤和快照的更多 Silverlight 文章来更好地为您服务。

历史

• 2010 年 7 月 29 日：初始帖子