将 Node.js Web 应用程序中的图形制作成动画

2014 年 7 月 17 日
 

Viswanath Rao

GBS 主题专家,Telecom Billing

在 IBM 印度工作,在电信领域。

为了帮助快速执行应用程序开发,IBM Bluemix™ 为各种类型的应用程序提供了 样板,包括 Node.js Web 应用程序。我将介绍如何结合使用 IBM Bluemix Node.js 样板和 Dojo 技术,通过旋转网页中的一系列图形,将它们制作成动画。您将在 IBM DevOps Services 上自定义样板代码,并从这里将修改的应用程序部署到 Bluemix。

准备工作

 

第 1 步. 在 Bluemix 上创建一个 Node.js Web Starter 应用程序

 
  1. 登录到 Bluemix
  2. 单击 Catalog
  3. 在 Bluemix 目录中的 Boilerplates 下,单击 NODE JS WEB STARTER 卡片。
  4. 单击 Create application
  5. Name 文本框中为您的应用程序输入一个名称。(所有 Bluemix 应用程序目前共享同一个命名空间,所以应用程序名称必须是惟一的。)

第 2 步. 下载样板代码

 
  1. 为新创建的应用程序单击卡片的白色背景中的任何地方。
  2. 在应用程序仪表板中,单击 VIEW GUIDE 按钮。
  3. 在右侧打开的指南中,单击 2. Download the starter application package
  4. 将下载的 ZIP 文件保存在本地系统上,但不要解压其中的内容。

第 3 步. 将样板代码导入 DevOps Services 中

 
  1. 使用您的 IBM ID 登录 DevOps Services
  2. 单击 CREATE PROJECT
  3. 为创建的项目提供与第 1 步中创建的 Bluemix 应用程序相同的名称,然后选择 Use Jazz SCM 作为代码位置。根据需要,如果不希望将项目公开,选择 Private 单选按钮。
  4. 选择 Deploy to Bluemix 单选按钮,以便以后可将更新的代码推送回 Bluemix。
  5. 单击 CREATE
  6. 在新创建的项目中,单击 EDIT CODE
  7. 使用 File > Import 将样板 ZIP 文件导入到项目中并展开: 将本地代码 ZIP 文件导入 DevOps Services 项目的屏幕截图

    点击查看大图

  8. 展开页面左侧的项目树,单击 index.ejs 文件打开它以供编辑。

阅读:在 Node.js 中使用 DevOps Services Web IDE 开发 Bluemix 应用程序

第 4 步. 为您的动画自定义 index.ejs

 

任何 HTML 相关更改都可在 index.ejs 中直接自定义,并立即反映在应用程序的目标网页中。

index.ejs 文件是一个 JavaScript 模板,即您的 Web 应用程序的起点。此文件在您在浏览器中打开应用程序时首次运行。任何 HTML 相关更改都可在 index.ejs 中直接自定义,并立即反映在应用程序的目标网页中。

在 index.ejs 中,我们将采纳 Dojo 技术来将您自己选择的图像制作成动画。找到几张可通过 URL 访问的任何格式(JPG、PNG 等)的图像(比如 这张图)。

删除 index.ejs 中的所有现有代码;您不需要它。看看我完成的 ImageRotator 项目中的 index.ejs 文件。以下操作很重要。

通过添加此 script 标记而包含 Dojo API:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
			djconfig="parseOnLoad: true">
    </script>

Dojo 通过 createSurface API 访问此 HTML 标记来显示初始图像:

<body>
     <div id="shape">
     </div>
  </body>
surface = dojox.gfx.createSurface("shape", 300, 300);

创建一个计时器,以便按定义的间隔旋转图像。

	t = new dojox.timing.Timer(300);
	t.onTick = function() {
             alterAndDraw ();
      }
	t.onStop = function ()  {
      }
      t.start();

只要计时器过期,图像位置就会改变。在图像到达旋转区域末尾时反转方向。

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 步中创建的现有的样板版本。

  1. 在 DevOps Services 项目中,单击项目代码树中的 manifest.yml。
  2. 单击页面顶部的 DEPLOY 按钮。
  3. 输入并提交您的 Bluemix 凭据: DevOps Services 中的对话框屏幕截图,您需要在其中输入用于部署的 Bluemix 凭据

    点击查看大图

  4. 部署完成后,打开来自 DevOps Services 的应用程序 URL,可以看到您的图像在依次旋转。也可以单击 Bluemix UI 中显示的应用程序 URL。

结束语

 

IBM Bluemix 样板有助于快速开始进行 Node.js Web 应用程序开发。所有应用程序基架都已为您创建好;您唯一需要更改的文件是 index.ejs。请查阅 Bluemix 提供的其他样板应用程序,为 Web 和移动开发提供便利。

Bluemix 中的可用样板屏幕截图

相关主题:Node.jsJavaScriptDojo Toolkit

添加评论

注意:评论中不支持 HTML 语法


剩余 1000 字符

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Cloud computing, Web development
ArticleID=977785
ArticleTitle=将 Node.js Web 应用程序中的图形制作成动画
publish-date=07172014