Nibblestutotials.net教程 – Blend & Silverlight1系列之Animations

part1: rocket up

Nibble将要教您Silverlight1.0中基本的动画创作。在第一部分，我们将要制作一个火箭升空的动画。

完成此教程，你需要安装Expression Blend 2的9月预览版。

本教程配套项目文件下载：part1, part2

创建一个新的Silverlight 1.0项目。
a.打开Expression Blend 2的9月预览版。
b.选择文件>新项目… 打开创建新项目对话框（如图）。

c.选择Silverlight Application (JavaScript)并点击OK。新项目被创建同时Page.xaml出现在画布中。
导入并打开Rocket插图(XAML)。
a.在属性面板的"文件"的项目名上右击并选择添加已存在项目…
b.浏览到项目文件夹中的rocket.xaml文件。（如图）

c.点击打开按钮导入XAML文件。
这个XAML包含了我们将用来制作动画的rocket的插画。XAML文件中插画是由一系列的路径（矢量图形）组成的。
d.在属性面板的"文件"中双击刚导入的rocket.xaml文件。这样您就应该能在"舞台"中看到rocket了。
由Rocket.xaml中拷贝插画。
a.在交互面板"对象与时间轴"中选择rocket项。

b.按Ctrl+C将图像拷贝到剪切板。
粘贴插画到Page.xaml
a.选择Page.xaml标签，定位到窗口的上部（如图）。
b.按Ctrl+V键将插画粘贴到Page.xaml文件中。现在我们可以准备使我们的火箭动起来了。
将Rocket置于舞台之外。
a.点击舞台中的rocket选中它。蓝色的句柄会出现在插画的四周作为对选中的响应。
点击并拖拽rocket到舞台的左下方并在可视区域之外，参考插图。
创建一个故事板。
a.点击"打开，创建或管理故事板"(Open,create or manage Storyboards)按钮，打开故事板拾取器对话框。
b.点击创建新故事板按钮打开创建故事板对话框。
c.在名称栏键入flyin。
d.取消选中"作为资源创建"，因为我们想让其一加载时就播放。
e.点击确定。一条新的时间轴就出现在窗口的底部。
绘制Rocket的位置
a.移动playhead到时间0:01.000位置。
要移动时间标记，您即可以点击并拖动黄色的三角标记，也可以在Playhead position文本框输入值。
b.点击并拖动rocket，将其移动到舞台中央。
这将自动在1秒位置处创建一个关键桢，因为录制(recording)默认是开启的（参考下图）。
保存你的工程文件，选择文件>保存（Ctrl+s），然后选项目>测试项目（F5）。你会看到1秒钟内火箭由左下部移动到中心位置的动画效果。
关闭故事板
a.在交互面板"对象与时间轴"中点击关闭故事板按钮（参考图）。

这将关闭flyin这条时间轴。
下一步…
这是一个很简单的例子，现在你可以准备进入下一步了。

继续下一个nibble Animations Part：Rocket Down来学习有趣的动画技术。

part2: rocket down

在第二部分中，我们将使火箭模拟自由落体运动，你将控制加速度并创建更多的关键桢。

同样完成此部分教程，你需要安装Expression Blend 2的9月预览版。

打开第一部分完成的项目。
a.打开第一部分Rocket Up项目。完成后效果如图所示。
打开时间轴—flyin。
a.在交互面板"对象与时间轴"中点击"打开，创建或管理故事板"按钮打开故事板拾取器对话框。
b.点击flyin故事板打开它。参考下图。
在0:00.000处创建关键桢。
a.选择rocket对象。
b.点击录制关键桢按钮在0:00.000处创建一个关键桢。参考下图
动画的渐变（Ease）效果
我们创建的第一个动画非常的枯燥，将火箭由一点移动到另一点而不能控制其加速度。我们可以调整关键桢的Ease in及Ease out属性来控制Expression Blend中对象的加速度。
a.右击0:01.000处的关键桢，在弹出的上下文菜单中选择Ease In > 100%。这样当火箭将到达中央时将产生减速的效果。参考下图

给Ease In及Ease Out赋不同的值来测试项目，感受一下有啥不同。
在0:01.300处创建关键桢
现在我们将使火箭在空中停留一小段时间，然后使其自由落体下降。
a.选择rocket对象并将时间移动到0:01.300。
b.点击录制关键桢按钮创建另一个关键桢。这个关键桢将使火箭在它的位置保持0.3秒中。
在0:02.000处移动并旋转火箭。
a.将时间轴移动到0:02.000处
b.点击并垂直向下拖动rocket到舞台外。
c.旋转rocket使其指向下方。你可以使用蓝色的句柄来旋转对象，只需将鼠标移近一个选中的角一个蓝色的旋转光标就会出现（见图片）。

正如你看到的，你不需要创建一个关键桢，你只需改变对象的属性Blend会自动使用新属性创建一个关键桢。在本例中我们改变了动画的位置及方向。
通过调整Ease Out模拟重力效果
a.右击0:01.300处的关键桢并选择Ease Out > 100%使其产生模拟重力加速度的效果。

按Ctrl+s保存更改并按F5测试项目，你会看到火箭升空、在空中停留一会，然后垂直下落。
2007 9月预览版新增的KeySpline功能。
除了前面描述的Easy In与Easy Out选项之外，从2007 9月预览版起你可以使用KeySpline图像来控制动画。
你只需点击一个关键桢，然后到属性面板中"Easing"类别下就可以调节KeySpline。参见下图。