html5,喊啊喊,喊的好久了,我们一帮jser也在后面摇旗呐喊了多年,但是事情总是很缓慢的在往前发展,但是毕竟它还是在发展的。奶奶的。从n久之前,已经不只n遍下过决心要学习要系统的学习html5了,逛各大网站,翻w3c文档,但是每次都是热火一会又放下了,因为我的工作是要兼容ie6的,国内的ie6是占了50%以上市场份额的,于是,每次给自己鼓起了百倍的信心要学htm5的先进生产力,但是不久又还是偃旗息鼓的回去捡起被我吐槽了一百遍一百遍的ie6继续过着jser的刀耕火种的日子.........

前面和武汉的一同事聊html5,我一直以为我这么久的在关注html5的发展,应该对其还是有一定了解的,探讨中,我才发现我一直只是在关注而已,甚至我知道canvas,但是canvas的一些常用api我都记忆模糊,被鄙视了,好蛋疼。。。。。

 

临渊羡鱼,不如退而结网

好吧,现在什么技术最火?HTML5!现在什么技术最时尚!还是HTML5!也许有泡沫和炒作的成分,但是不得不承认,这个世界上本就没有所谓的公平。多年来兢兢业业带给我们无数快乐痛苦和就业机会的Flash,在代表着众多巨头利益,从蹒跚学步起就被内定为太子的HTML5面前,也许注定就是为他人做嫁衣的命。

当你在网上看到铺天盖地的HTML5新闻,各种各样炫目的DEMO,同时脑袋里充斥着各种新鲜的名词,什么矢量动画、视频标签、离线存储、地理信息、新型表单、语意标签等等等等的时候。你是否会有一些迷茫?到底什么是HTML5?应该从何处入手?  我决定从canvas入手,因为整个的html5 和 每个前端开发者现有的技术属性上来看,学习成本最大的可能就是这玩意了的,其他的都真的还是相对很简单的。


好消息

 最近有些好消息就是 移动qq游戏平台推出html5版   q+宣布其应用平台采用了webkit内核支持html5应用,以及磊友科技的几款html5游戏已经面试,等等这些,说明国内的html5已经有了先行者在探索,而不在是都在伸长了脖子在呐喊和等


交互兼容性

很多时候,“跨平台”三个字已经成了鸡肋和枷锁,不知多少优秀的产品死在这上面。跨平台不是HTML5最大的噱头么?

这里所说的跨平台,不是传统的linux和Windows,也不是说兼容android和ios,更不是指IE和Firefox,而是指同时跨PC、平板以及手机设备。这种范围的跨平台就决定了这不仅仅是一个简单的技术问题,而同时是一个交互问题。

下表是PC和触屏设备的常用交互方式对比。

 

PC平台(键盘、鼠标)

平板设备(触屏)

外接键盘输入

×

单击

双击

×

拖动

多点触控

×

 

一些技术细节

PC上的就不说了,这里只说Android和IOS。HTML5对于触屏设备的单点触控提供了touchstart,touchend,touchmove和touchcancel四种事件。而通过测试表明,一旦监听了这四种事件中的任意一种,很多设备将不会触发click事件。这样的话,要想实现拖拽和点击两种交互操作,就只能通过上面这一组touch事件来组成。我们使用的是以下的方案:

事件顺序

操作

touchstart->touchend

点击

touchstart->touchmove(多个)->touchend

拖拽

touchstart->touchmove(多个)->touchcancel

拖拽

touchmove(多个)->touchcancel

划过

touchmove(多个)->touchend

划过

也就是说,如果刚触发完touchstart事件马上就触发touchend,说明手指只是轻轻点了一下屏幕,也就是所谓的点击操作。这样即使不监听click事件也能实现点击的侦听。不过这里有一个实际的情况,很多山寨的Android设备屏幕很不灵敏,比如我们公司拿到的电信酷派D530手机,需要使劲按下才能有所感知。这种情况下一定会触发touchmove事件。所以针对Android设备的点击操作可以适当放宽,比如touchstart和touchend之间可以允许有少量几个touchmove,并且touchmove的距离不能超过多少个像素等等。

性能

HTML5跑canvas动画,游戏 的 性能,我只能用坑爹两个字来形容。从硬件上来讲,目前html5应用比较广泛的移动平台设备由于电压和芯片架构的不同,同样主频的手机性能和PC上进行相比差距甚远。再加上HTML5本身是一种解释型的脚本语言,其运行效率也远远低于本地应用。而pc平台的话,目前的浏览器战国时代硝烟四起,格局一时间难以打破,但是html5大一统的趋势还是明朗的,鉴于HTML的Canvas只为我们提供了非常简单的接口。所以我们目前急需等待如 flash flex之于as3 般商业化的开发ide 集成环境 和对应的引擎, 而目前市面上面的针对canvas html5的引擎已经有不少,不过都还在发展阶段。总之,我们还需要等,但是,学习,确是现在不准备,更待何时!

 

纯Canvas开发和DIV + CSS方式的对比

       DIV + CSS方式并不太适合复杂的动画开发,一是封装比较困难。再来是性能问题。Canvas本身只是一个二进制的内存块。而DIV+CSS却涉及到了DOM模型,动画效果也要通过修改CSS然后浏览器观察到变化再修改DOM的渲染,绕了一个大弯。通过实验测试,在手持设备上,这种方式比纯Canvas的动画慢了大概1.5倍到2倍。

 posted on 2012-03-08 15:17 落叶满长沙 阅读(...) 评论(...) 编辑 收藏