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

part1: rocket up

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

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

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

1. 创建一个新的Silverlight 1.0项目。
   a.打开Expression Blend 2的9月预览版。
   b.选择 文件>新项目… 打开创建新项目对话框（如图）。
   
   c.选择Silverlight Application (JavaScript)并点击OK。新项目被创建同时Page.xaml出现在画布中。
2. 导入并打开Rocket插图(XAML)。
   a.在属性面板的"文件"的项目名上右击并选择添加已存在项目…
   b.浏览到项目文件夹中的rocket.xaml文件。（如图）
   
   c.点击打开按钮导入XAML文件。
   这个XAML包含了我们将用来制作动画的rocket的插画。XAML文件中插画是由一系列的路径（矢量图形）组成的。
   d.在属性面板的"文件"中双击刚导入的rocket.xaml文件。这样您就应该能在"舞台"中看到rocket了。
3. 由Rocket.xaml中拷贝插画。
   a.在交互面板"对象与时间轴"中选择rocket项。
   
   b.按Ctrl+C将图像拷贝到剪切板。
4. 粘贴插画到Page.xaml
   a.选择Page.xaml标签，定位到窗口的上部（如图）。
   b.按Ctrl+V键将插画粘贴到Page.xaml文件中。现在我们可以准备使我们的火箭动起来了。
5. 将Rocket置于舞台之外。
   a.点击舞台中的rocket选中它。蓝色的句柄会出现在插画的四周作为对选中的响应。
   点击并拖拽rocket到舞台的左下方并在可视区域之外，参考插图。
   
6. 创建一个故事板。
   a.点击"打开，创建或管理故事板"(Open,create or manage Storyboards)按钮，打开故事板拾取器对话框。
   b.点击创建新故事板按钮打开创建故事板对话框。
   c.在名称栏键入flyin。
   d.取消选中"作为资源创建"，因为我们想让其一加载时就播放。
   e.点击确定。一条新的时间轴就出现在窗口的底部。
7. 绘制Rocket的位置
   a.移动playhead到时间0:01.000位置。
   要移动时间标记，您即可以点击并拖动黄色的三角标记，也可以在Playhead position文本框输入值。
   b.点击并拖动rocket，将其移动到舞台中央。
   这将自动在1秒位置处创建一个关键桢，因为录制(recording)默认是开启的（参考下图）。
   保存你的工程文件，选择 文件>保存（Ctrl+s），然后选 项目>测试项目（F5）。你会看到1秒钟内火箭由左下部移动到中心位置的动画效果。
8. 关闭故事板
   a.在交互面板"对象与时间轴"中点击关闭故事板按钮（参考图）。
   
   这将关闭flyin这条时间轴。
9. 下一步…
   这是一个很简单的例子，现在你可以准备进入下一步了。

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

part2: rocket down

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

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

1. 打开第一部分完成的项目。
   a.打开第一部分Rocket Up项目。完成后效果如图所示。
   
2. 打开时间轴—flyin。
   a.在交互面板"对象与时间轴"中点击"打开，创建或管理故事板"按钮打开故事板拾取器对话框。
   b.点击flyin故事板打开它。参考下图。
   
3. 在0:00.000处创建关键桢。
   a.选择rocket对象。
   b.点击录制关键桢按钮在0:00.000处创建一个关键桢。参考下图
   
4. 动画的渐变（Ease）效果
   我们创建的第一个动画非常的枯燥，将火箭由一点移动到另一点而不能控制其加速度。我们可以调整关键桢的Ease in及Ease out属性来控制Expression Blend中对象的加速度。
   a.右击0:01.000处的关键桢，在弹出的上下文菜单中选择Ease In > 100%。这样当火箭将到达中央时将产生减速的效果。参考下图
   
   给Ease In及Ease Out赋不同的值来测试项目，感受一下有啥不同。
5. 在0:01.300处创建关键桢
   现在我们将使火箭在空中停留一小段时间，然后使其自由落体下降。
   a.选择rocket对象并将时间移动到0:01.300。
   b.点击录制关键桢按钮创建另一个关键桢。这个关键桢将使火箭在它的位置保持0.3秒中。
   
6. 在0:02.000处移动并旋转火箭。
   a.将时间轴移动到0:02.000处
   b.点击并垂直向下拖动rocket到舞台外。
   c.旋转rocket使其指向下方。你可以使用蓝色的句柄来旋转对象，只需将鼠标移近一个选中的角一个蓝色的旋转光标就会出现（见图片）。
   
   正如你看到的，你不需要创建一个关键桢，你只需改变对象的属性Blend会自动使用新属性创建一个关键桢。在本例中我们改变了动画的位置及方向。
7. 通过调整Ease Out模拟重力效果
   a.右击0:01.300处的关键桢并选择Ease Out > 100%使其产生模拟重力加速度的效果。
   
   按Ctrl+s保存更改并按F5测试项目，你会看到火箭升空、在空中停留一会，然后垂直下落。
8. 2007 9月预览版新增的KeySpline功能。
   除了前面描述的Easy In与Easy Out选项之外，从2007 9月预览版起你可以使用KeySpline图像来控制动画。
   你只需点击一个关键桢，然后到属性面板中"Easing"类别下就可以调节KeySpline。参见下图。
   

下一步…
记住你可以在动画中进行其他形式的样式变化，如缩放及倾斜。
你同样可以制作出如透明度，颜色，透明标记，渐变色等属性变化的动画效果。
现在你已经具备了浏览其他动画效果的基本知识。