基于HTML5的移动应用的通用模块的设计与实现.docx
- 文档编号:22788996
- 上传时间:2023-04-27
- 格式:DOCX
- 页数:29
- 大小:95.06KB
基于HTML5的移动应用的通用模块的设计与实现.docx
《基于HTML5的移动应用的通用模块的设计与实现.docx》由会员分享,可在线阅读,更多相关《基于HTML5的移动应用的通用模块的设计与实现.docx(29页珍藏版)》请在冰豆网上搜索。
基于HTML5的移动应用的通用模块的设计与实现
基于HTML5的移动应用的通用模块的设计与实现
基于HTML5的移动应用的通用模块的设计
与实现
5
10
15
20
25
30
35
摘要:
移动互联网在近几年获得了飞速发展,但移动终端操作系统不一,主流的Android、
iOS及WindowsPhone操作系统拥有各自独立的“生态体系”。
HTML5凭借其良好的跨平
台性为不同操作系统间的适配问题提供了一种统一的解决方案。
本文通过对HTML5技术的
深入研究,使用HTML5新增特性,设计并实现了基于HTML5的应用的通用模块,包括:
声音模块、动画模块与数据离线存取模块,并实现了双缓冲技术在HTML5中的应用。
关键词:
HTML5;动画;声音;双缓冲
中图分类号:
TP311.1
Thedesignandimplementationofcommonmodulein
mobileapplicationsbasedonHTML5
ZHANGQiwei,HUANGXiaojun
SchoolofInformationandCommunicationEngineering,BeijingUniversityofPostsand
Telecommunications,Beijing100876
Abstract:
MobileInternetenjoysrapiddevelopmentinrecentyears.However,operatingsystems
ofmobilephonesarevarious.Themainstream,AndroidiOSandWindowsPhone,hasaseparate
"eco-system".HTML5providesaunifiedsolutionfortheadaptationproblemsbetweendifferent
operatingsystemswithagoodcross-platformperformance.Inthisarticle,muchattentionhasbeen
focusedontheimplementationofcommonmodule,includingaudiomodule,animationmodule
andoff-linestoragemodule.Inaddition,thisarticlegivestheimplementationofdouble-buffer
usingCanvas.
Keywords:
HTML5;animation;audio;double-buffer
0引言
随着智能终端的普及以及网络质量的提升,移动互联网成为了时下最具潜力的新兴概
念。
移动互联网可以被理解为:
有着移动通信特性的新型互联网服务。
而这些服务最直接的
体现就是涵盖了生活方方面面的应用软件。
由于移动终端性能的提高,加之互联网的支持,
应用软件的需求与日俱增。
不过在给人们的生活带来了很大方便的同时,应用的开发过程却
面临着许多问题。
其中,最主要的一点就是开发时面临的不同操作系统的选择问题。
目前,主流的三种操作系统Android、WindowsPhone、iOS各据一方,它们都有各自独
立且封闭的"生态系统",完善的产业链及相关服务。
这使得资源有限的开发者不得做出选择,
因为放弃了任何一种操作系统就相当于放弃了一个用户群。
然而,想要使尽可能多的用户使
用,开发者不得不对一个应用进行针对不同操作系统的重复开发,这直接增加了开发周期与
-1-
成本。
因此,开发者迫切希望能有一个办法解决应用跨平台移植的问题。
于2008年被正式作为草案提出的新一代HTML规范HTML5[1]就是一个解决这一问题
40
45
的优秀方案之一。
由于HTML5应用通过手机浏览器运行,而不直接依赖于操作系统,并且
目前主流的操作系统均有为数众多的浏览器支持HTML5新增特性[2],因此,基于HTML5
开发的应用有其与生俱来的跨平台特性。
本文通过对HTML5新增特性的分析与使用,设计并实现了适配多浏览器并支持声音叠
加播放的声音模块、支持高效率绘制动画的动画模块以及可以离线保存与读取数据的数据存
取模块。
1HTML5技术分析
1.1
CanvasAPI分析
Canvas元素提供了一块分辨率独立的位图区域,可以用来进行图形绘制及图像渲染。
而CanvasAPI正是提供了一系列方法,使用户可以直接使用JavaScript在页面上完成图形的
50
生成、图像的插入及动画效果的展示。
在此之前,在页面上绘制一条对角线都是一项复杂而
艰巨的任务。
CanvasAPI提供的方法主要包含基本图形的绘制、图像的绘制、图形变换等等,
甚至还提供了直接进行像素级别操纵的方法。
目前,CanvasAPI已经比较成熟,随着IE9
的到来,HTML5CanvasAPI已经获得了所有主流浏览器的支持[2]。
在基于HTML5的应用
中,随处可见Canvas的身影,可以说,它是HTML5新增特性中使用范围最广的特性之一。
55
1.2
Audio元素分析
Audio元素为HTML5应用提供了原生的多媒体的支持,使用户可以直接在页面上无插
件地播放声音、视频文件[2]。
在HTML5的Audio元素出现以前,如果开发者需要在页面上
播放多媒体文件,需要使用等大量相关标记,并为其设置具体参数,而且还不得不
将完成标记的多媒体文件交由第三方插件处理。
而插件恰恰是浏览器不稳定的主要原因,插
60
件产生的更新提示也给用户带来很大不便。
Audio元素的出现正是为了解决这一问题。
1.3
WebStorageAPI分析
WebStorageAPI,是HTML5提出的用于在客户端离线存取的数据的接口,它主要是为
了解决使用cookie时产生的问题,例如:
cookie大小一般被限制在4KB以内并会始终随着
HTTP请求来回传送等[1]。
针对这个问题WebStorageAPI并提供了用来实现离线存储的2
65
70
种属性localStorage与sessionStorage。
它们的用法类似,区别在于localStorage保存的数据
不会因浏览器关闭而消失,而sessionStorage存储的数据会在浏览器关闭后被清除。
使用
HTML5的离线存储功能,不但可以保存短时间内需要频繁使用的数据,还可以构建在线下
载,离线使用的离线web应用。
除了上述这些HTML5还提供了用于实现定位功能的GeolocationAPI、具有强大通信功
能的WebSocketsAPI等等,由于本文未涉及上述功能,因此不做具体阐述。
2声音模块的设计与实现
2.1
适配多浏览器的音频资源选择加载方法
Audio元素是HTML5中又一新加元素,提供了丰富的方法及属性。
并且audio元素还
具有丰富的事件,可以通过对其进行监听来灵活地控制声音的播放。
-2-
75
80
85
90
95
100
105
110
目前的浏览器大都支持Audio元素,但是不同浏览器对具体格式的音频及相应的多媒
体数字信号编码解码器的支持存在差异[3]。
首先,需要判断浏览器是否支持audio元素。
使用document.createElement方法创建
audio元素,如果浏览器支持audio元素,则创建成功,返回audio元素的一个引用,通过它
判断浏览器是否支持audio元素。
接下来,需要判断浏览器对音频格式的支持情况,使用audio元素的方法canPlayType
分别对mp3、wav、acc与oggVorbis进行判断,并建立audioFormatSupported对象,将判
断结果保存至其属性值。
canPlayType方法的返回值为"probably"、"maybe"或空字符串。
其
中,"probably"、"maybe"表示浏览器可能支持该格式的音频文件。
varaudioTestdocument.createElement'audio';
ifaudioTest
audioFormatSupported
mp3:
audioTest.canPlayType'audio/mpeg;',
wav:
audioTest.canPlayType'audio/wav;',
acc:
audioTest.canPlayType'audio/aac;',
ogg:
audioTest.canPlayType'audio/ogg;codecs"vorbis"'
为了可以支持更多的浏览器,为同一声音制作的不同格式的音频文件,并放在HTML5
应用的资源文件夹中。
使用lastIndexOf获得路径中"."的位置,并使用substring方法根据
该位置对路径进行切分取出格式名称赋给变量format,通过audioFormatSupported判断该格
式是否被浏览器支持。
ifformat"mp3"
&&audioFormatSupported.mp3"probably"
||audioFormatSupported.mp3"maybe"
//加载该mp3音频文件
elseifformat"wav"
&&audioFormatSupported.wav"probably"
||audioFormatSupported.wav"maybe"
//加载该wav音频文件
……
else
window.alert"浏览器不支持现有音频格式!
";
115
2.2
声音加载与叠加播放的实现
声音的加载方法为:
首先实例化一个Audio对象,然后为其src属性指定资源路径即可。
但是只实例化一个Audio对象,叠加播放是无法实现的,因为只有等声音资源完全播放完成
后,才会开始下一次播放。
为此,对需要进行叠加播放的声音资源实例化多个Audio对象,
-3-
并将它们加入声音数组中。
在播放时,通过对该声音的声音数组的遍历,找到数组中处于暂
停或结束播放的Audio对象进行播放,就可以很好地解决问题。
120
125
130
135
140
145
150
155
首先应该确定如何在加载资源时,判断该资源是否需要重复播放。
可以在资源列表中,
为声音资源对应的名称添加后缀“_overlap”来判断该声音资源是否需要重复播放:
varGameStatSrc
……
shoot_mp3_overlap:
"sounds/shoot.mp3",
shoot_wav_overlap:
"sounds/shoot.wav",
shoot_mp3_overlap:
"sounds/shoot.ogg",
……
通过for-in循环遍历资源列表,截取资源名称最后一个“_”后的字符串,并进行判断,
将当前加载的声音资源是否需要循环保存至bOverlap:
varbOverlap"overlap"srcName.substringsrcName.lastIndexOf"_"+1;
另外,由于在对需要重复播放的声音资源进行加载时,由于使用同一个数组保存需要重
复播放的声音,因此该数组可能保存有多个不同的声音资源,因此需要确定如何标记此次加
载的声音资源。
可以使用模拟的二维数组来实现,数组中首先保存需要叠加播放的声音资源
的名称srcName,然后保存其对应的多个Audio对象。
首先,初始化Array类型的对象soundArr:
varsoundArr[];
如果名为srcName的声音需要叠加播放,将声音资源的名称作为其属性,并在soundArr[]
的基础上新建数组:
soundArr[srcName][];
下面通过循环创建多个srcName对应的Audio对象,并添加至soundArr[srcName]。
ifbOverlap
forvark0;kOVER_LAP_TIMES;k++
this.sources[srcPath]newAudio;
this.sources[srcPath].srcsrcPath;
this.soundArr[srcName][k]this.sources[srcPath];
其中,OVER_LAP_TIMES为预计的叠加播放的次数,根据需要定义。
最后,在sources[srcPath]加载完成后,该Audio对象的canplay事件会被触发,对canplay
事件进行监听,并绑定事件处理函数CheckProgress,计算总体资源(声音、图像)的加
载进度。
声音加载的总流程如图1所示。
在需要进行叠加播放声音的地方,创建对象audioToPlay用于保存当前可以进行播放的
Audio对象,并对soundArr中的需要播放的声音资源名称所包含的所有Audio对象进行遍历,
找到处于暂停paused或结束ended状态的Audio对象,停止遍历,并对其进行播放。
由于
每次都从长度为OVER_LAP_TIMES的Audio对象数组中取出可以进行播放(不为暂停、
结束状态)的声音进行播放,因此不会出现声音在未停止前无法播放的情况,从而实现了声
音的叠加播放。
例如:
对shoot_mp3_overlap资源的叠加播放,实现如下:
forvari0;iOVER_LAP_TIMES;i++
-4-
160
165
varaudioToPlay;
ifsoundArr["sound_overlap"][i].paused
||soundArr["sound_overlap"][i].ended
audioToPlaysoundArr["shoot_mp3_overlap"][i];
audioToPlay.play;
图1声音加载具体流程
Fig.1Theprocessofaudioloading
-5-
170
3动画模块的设计与实现
3.1
适配手机屏幕的画布初始化
在HTML文档中,使用canvas标签会创建一块矩形的区域,然后通过getContext方法
获取canvas元素的绘图环境,才能使用HTML5提供的API在画布上进行绘制[4]:
//获得id为myCanvas的canvas元素
175
varcanvasdocument.getElementById"myCanvas";
//创建上下文环境,在此环境中完成图像绘制
varcontextontext'2d';
在获得了绘图环境后,开发者可以直接通过调用CanvasRenderingContext2D
API,使
[4]
180
185
有2个属性height与width,分别表示画布的高和宽,在默认情况下画布大小为300像素300
像素。
由于本文涉及的HTML5应用针对智能移动终端开发,而不同智能移动终端的屏幕大小
不一,如果针对每款终端重新设置画布大小效率不高,因此需要使画布适配不同屏幕大小的
手机。
通常,智能终端的浏览器窗口的大小都是适配屏幕的,因此,为了使HTML5应用适
配不同的屏幕大小,应该选择浏览器的页面大小进行画布初始化。
代表浏览器的window对
象的属性innerWidth与innerHeight分别代表浏览器页面窗口的宽与高,因此将画布大小初
始化为:
canvas.widthwindow.innerWidth;//适配屏幕
canvas.heightwindow.innerHeight;
190
3.2
使用Canvas实现动画方法分析
动画效果是由对一系列连续的图像的快速展示而产生的,其中的一张图像称作一帧
(frame)。
要实现流畅的动画效果必须保证,每一帧之间的时间间隔固定且应高于24帧/
秒,以及每张动画的内容及相对位置应保持连续。
因此,实现动画效果需要按固定间隔绘制
连续的帧,往往一个连贯的动画效果需要由大量的帧实现。
195
200
205
由于HTML5应用与网络密切相关,完成动画所需要的图像资源均保存在服务器中。
智
能终端通过浏览器向服务器发送请求来接收所需的资源,因此精简资源有助于减少HTTP
请求发送的次数,从而达到降低用户等待时间的目的。
一个比较有效的做法是,将实现同一
动画效果所需的帧保存在一个图像文件中,在绘制时将当前帧从图像文件中截取出来。
CanvasAPI提供的drawImage方法就可以完成这一功能。
drawImage方法可以完成将图像资源按需求进行裁剪、缩放等操作绘制在画布上,在
使用drawImage绘制图像前,必须首先明确画布的坐标系。
在canvas画布中,左上角为原
点0,0,x,y轴分别相对原点的以右、下方向为正方向,drawImage方法的原型如下[4],参
数含义如图2所示。
drawImageimage,clips_x,clips_y,clips_width,clips_height,x,y,width,height;
其中:
image是需要绘制的图片对象。
clips_x,clips_y与clips_width,clips_height是可选项,当需要绘制原图中的某一部分使
使用,表示从原图的clips_x,clips_y坐标开始,取出大小为clips_width,clips_height的图像
-6-
片段。
210
图2Canvas画布坐标系及drawImage方法参数说明
Fig.2TheexplanationofCanvascoordinatesystemanddrawImagemethod’sparameters
x,y表示待绘制的图像(片段)在画布上的位置。
215
width,height表示待绘制图像(片段)的大小。
当未设置clips_x,clips_y,clips_width
及clips_height时,省略width,height会默认按原图大小绘制;当设置clips_x,clips_y,
clips_width及clips_height时,不可省略。
当width/height的某一项或两项的值不等于原图像
(片段)的宽或高时,会对图像进行相应的缩放。
220
3.3
动画绘制的实现
动画的实现需通过定时更新当前需要绘制的帧数索引以及动画在画布上的位置,并在原
图中按更新后的索引值取出当前所需绘制的帧,完成绘制,并通过方法setTimeout完成动
画模块的超时调用,实现动画效果,如图3所示。
下面具体阐述动画模块的实现方法:
1、创建构造函数Animation,并为其原型属性添加init、update及draw方法,分
225
230
别完成动画对象的初始化、动画绘制参数的更新及动画的绘制。
2、init方法需要获取的参数包括:
(1)、动画id:
用来区别不同的动画对象,并在其它地方使用动画对象。
(2)、全部帧的图像对象、全部帧的图像的大小、每一帧的大小、动画在屏幕上的位
置:
从全部帧的图像中获取一帧并将其绘制在屏幕上的所需参数。
(3)、当前帧的索引:
通过索引值更新帧,实现动画效果。
(4)、动画是否需要循环:
一些动画需要循环绘制,如不挺在跑步的小猫;另一些则
-7-
无需循环,如爆炸效果。
(5)、是否绘制:
不需要循环的动画对象将不再被绘制。
(6)、缩放比例:
由于drawImage方法允许图像的缩放,故设置此参数供开发者选
235
240
择。
(7)、帧的组织方式:
一些是以图像中的帧是纵向由上到下排列的,另一些则是横向
由左到右排列的。
根据bTopDown,计算当前动画的全部帧数:
this.totalIndex
this.bTopDown?
this.width/this.frame_W:
this.height/this.frame_H;
具体参数如表1所示。
表1动画初始化参数说明
Tab.1Theexplanationofinitializationparametersofanimation
参数
id
src
x、y
width、height
frame_W、frame_H
bLoop
frame_Index
scale
bTopDown
bVisible
说明
动画标识
Image对象
动画在屏幕上的位置(默认值为0、0)
全部帧的图像的大小(宽、高)(默认值为64、64)
每一帧的大小(宽、高)(默认值为64、64)
动画是否需要循环(默认值为false)
当前帧的索引值(默认值为0)
是否缩放(默认值为false)
帧在全部帧的图像中的排列是否为由上到下(默认值为true)
是否绘制(默认值为true)
由于参数较多,为了使用方便,可以设置对象default保存参数的默认值,并在初始化
245
250
时使用接收到的参数覆盖其保存的参数值。
图3动画实现原理
Fig.3Theprocessoftheimplementionofanimation
3、update方法中,首先判断当前的帧索引是否已经到达该动画的总帧数。
如果未到达
-8-
帧的总数,则更新动画索引值:
this.frame_Index+1。
如果到达帧的总数,则判断动画是否
需要循环isLoop。
当动画需要循环时,将其索引值清0,即使动画从第一帧重新开始,实现
循环。
当动画不需要循环时,将动画是否绘制的参数bVisible置为false,使动画不再显示。
4、draw方法中,首先判断该动画是否需要显示bVisible,如果需要显示则通过更新后
255
的参数使用drawImage进行绘制,以帧为由上到下保存的图像为例:
drawImagethis.src,
//帧所在的图像对象
thi
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 HTML5 移动 应用 通用 模块 设计 实现