将 Node.js Web 应用程序中的图形制作成动画
|
- UID
- 1066743
|
将 Node.js Web 应用程序中的图形制作成动画
第 1 步. 在 Bluemix 上创建一个 Node.js Web Starter 应用程序- 单击 Catalog。
- 在 Bluemix 目录中的 Boilerplates 下，单击 NODE JS WEB STARTER 卡片。
- 单击 Create application。
- 在 Name 文本框中为您的应用程序输入一个名称。（所有 Bluemix 应用程序目前共享同一个命名空间，所以应用程序名称必须是惟一的。）
第 2 步. 下载样板代码- 为新创建的应用程序单击卡片的白色背景中的任何地方。
- 在应用程序仪表板中，单击 VIEW GUIDE 按钮。
- 在右侧打开的指南中，单击 2. Download the starter application package。
- 将下载的 ZIP 文件保存在本地系统上，但不要解压其中的内容。
第 3 步. 将样板代码导入 DevOps Services 中- 使用您的 IBM ID 登录 。
- 单击 CREATE PROJECT。
- 为创建的项目提供与第 1 步中创建的 Bluemix 应用程序相同的名称，然后选择 Use Jazz SCM 作为代码位置。根据需要，如果不希望将项目公开，选择 Private 单选按钮。
- 选择 Deploy to Bluemix 单选按钮，以便以后可将更新的代码推送回 Bluemix。
- 单击 CREATE。
- 在新创建的项目中，单击 EDIT CODE。
- 使用 File > Import 将样板 ZIP 文件导入到项目中并展开：
- 展开页面左侧的项目树，单击 index.ejs 文件打开它以供编辑。
第 4 步. 为您的动画自定义 index.ejs“任何 HTML 相关更改都可在 index.ejs 中直接自定义，并立即反映在应用程序的目标网页中。”
index.ejs 文件是一个 JavaScript 模板，即您的 Web 应用程序的起点。此文件在您在浏览器中打开应用程序时首次运行。任何 HTML 相关更改都可在 index.ejs 中直接自定义，并立即反映在应用程序的目标网页中。
在 index.ejs 中，我们将采纳 Dojo 技术来将您自己选择的图像制作成动画。找到几张可通过 URL 访问的任何格式（JPG、PNG 等）的图像（比如 这张图）。
删除 index.ejs 中的所有现有代码；您不需要它。看看我完成的 项目中的 index.ejs 文件。以下操作很重要。
通过添加此 script 标记而包含 Dojo API：
1
2
3
| <script src="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djconfig="parseOnLoad: true">
</script>
|
Dojo 通过 createSurface API 访问此 HTML 标记来显示初始图像：
1
2
3
4
| <body>
<div id="shape">
</div>
</body>
|
1
| surface = dojox.gfx.createSurface("shape", 300, 300);
|
创建一个计时器，以便按定义的间隔旋转图像。
1
2
3
4
5
6
7
| t = new dojox.timing.Timer(300);
t.onTick = function() {
alterAndDraw ();
}
t.onStop = function () {
}
t.start();
|
只要计时器过期，图像位置就会改变。在图像到达旋转区域末尾时反转方向。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| rad = rad + radDx;
cirX = cirX - cirDx;
if (rad == 120) {
radDx = -radDx;
cirDx = -cirDx;
} else if (rad == 10) {
radDx = -radDx;
cirDx = -cirDx;
getImage (); // bring next image
}
draw ();
drawn=true;
|
第 5 步. 部署并运行应用程序完成 index.ejs 文件的修改后，就可将应用程序推送到 Bluemix 环境中了，在这里它将覆盖第 1 步中创建的现有的样板版本。
- 在 DevOps Services 项目中，单击项目代码树中的 manifest.yml。
- 单击页面顶部的 DEPLOY 按钮。
- 输入并提交您的 Bluemix 凭据：
- 部署完成后，打开来自 DevOps Services 的应用程序 URL，可以看到您的图像在依次旋转。也可以单击 Bluemix UI 中显示的应用程序 URL。
结束语IBM Bluemix 样板有助于快速开始进行 Node.js Web 应用程序开发。所有应用程序基架都已为您创建好；您唯一需要更改的文件是 index.ejs。请查阅 Bluemix 提供的其他样板应用程序，为 Web 和移动开发提供便利。
 |
|
|
|
|
|
