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

孤街醉人 提交于 2020-04-07 13:19:54

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。参见下图。

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!