分类目录归档:html5

web动画–requestAnimationFrame

在很久很久以前我们页面动画是这个样子的

 

但是这样做有几个问题,就是

  • setTimeout效率并不是那么高
  • 大多数浏览器的是已16ms为一帧,但是如果你设置不对,就会出现跳帧现象

于是乎作为现代人的我们,有了新的解决方法就是利用 requestAnimationFrame

直接上代码:

 

针对不同浏览器做了兼容,可以说从IE6开始支持,那么requestAnimationFrame有什么好处呢,

  • 根据不同浏览器提供的帧去运动
  • setTimeout本身机制并没有requestAnimationFrame效率高(具体原因待考察)
  • 运行会更流畅,由其本身决定
  • 相对css3来说,绘制更高级,css3有很多效果达不到
  • 当当前页面不显示是,动画停止,节省cpu和电池热量

上面demo针对不同浏览器做了兼容,同时也写了取消事件。其实主要就这两个属性,很容易掌握。

ps: 其实开始研究的时候有个疑惑的地方,requestAnimationFrame 他没有时间这个参数,如果想要达到越来越快的效果怎么办。其实很简单,换个角度,以运动距离为参考,不断加大运动间距就ok啦。

参考:

MDN文档 

CSS3动画那么强,requestAnimationFrame还有毛线用?

html5 概括总结

概括

html5并不是想我们想象的那么神秘,其实只是让原来的东西变的更容易。html5增加的东西不仅仅是一些简单都新标签,那些只是一些简单的概念。就像html4的时候各个标签它只是标签而已。更重要的是灵活运用。
下面主要是将html5主要的东西概括一下。不对都地方请指正。

  • 新标签

    html5的一些新标签增加了部分比较有用的标签,同时也将上一版的标签的含义有所改变,这个具体请自行看书,html5标签最主要的就是它更接近与语义化。简单的举一下例子。

    • header 标记头部区域的内容(用于整个页面或者页面的一块区域)
    • footer 标记脚部区域的内容(用于整个页面或者页面的一块区域)
    • section Web 页面的一块区域
    • article独立的文章内容
    • aside 相关内容或者引文
    • nav 导航类辅助内容
      html5 新增属性总结
  • canvas

    canvas是html5中一个基础且重要的东西,用它来进行进行画东西,具体都canvas一些操作 请戳canvas

  • video & audio

    功能强大,知识简单,不做赘述,常用api

  • Geolocation

    Geolocation是位置信息,利用它可以调用找到你的位置信息,给出的是一个经纬度的值,结合其他地图api可以很好都开发出地图应用。

    • 个人感觉比较适合做商业应用 资料参考
  • Communication

    顾名思义Communication主要就是关于通信,方面的知识,页面与页面之间,页面与框架之间的信息互通,比较常见的一个例子就是html5做的幻灯片就是利用这方面的知识点做的。

    • 教程参考
      对于这方面的可能比较会用的可能多,希望自习看一下
  • webScoket

    webScoket html5中一个强大的通信功能,实现实时更新,减少网络延迟。
    用它可以做什么

    • 聊天室
    • 类似你画我猜游戏
    • 类似与股票数据实时更新效果
    • 与Geolocation结合定位并实时更新
      是不是很强大赶快来看一下怎么用吧 你画我猜带源码
      demo

      Web scoket 要想学好可能会涉及到一些后台方面的东西,需要简单的了解一下
  • Web Storage

    本地存储,其实就是cookie的扩展版。也是一个比较有用的功能,可以不用利用服务器就可以存储数据,方便又快速。 主要包括sessionStorage localstorage对这方面主要是对数据的处理和了解,只要能够有个大体了解,操作起来并不是太难

  • Forms

    • tel电话号码
    • email电子邮件
    • url网址
    • Search用于搜索引擎
    • range特定范围的数值选择器,滑动条
    • number只能是数字
    • 未来可能会支持,或者支持不是太好的
      • color 颜色选择器
      • datetime显示完整的时间,时间选择器
      • data 日期选择器
      • week某年的周选择器

    • 表单怎加这些元素最好的用处就是可以节约在前端表单验证方面的工作量。合理利用这些元素会让你开发更有效率

以上主要是应用比较广泛的地方还有一些也很有用的新属性就不一一介绍了,主要是因为比较简单或者不太常用,下面将一些其他的列出来,算是个提纲吧有机会再介绍

  • SVG 与canvsa对应 这个是画矢量图的应用接口
  • 拖放 拖拽上传等功能
  • history API 可以记录浏览历史,模仿浏览器的前进后退键
  • 离线存储 开发离线应用,或者与其他结合,是网站更加好用
  • Web GL 开发3D应用,canvas主要是用来开发二维图像,这个主要是用来开发3维图像,有个比较好的库three.js
  • Web worker 能够把 JavaScript 计算委托给后台线程,通过允许这些活动以防止使交互型事件变得缓慢。
  • Camera API 调用摄像头操作
  • 移动开发


开发html5应用

上面那些只是对html5的应用的一些介绍,是想要开发一个html5应用你,最主要的是将这些东西能够完美的结合起来。例如开发一个你画我猜,需要画板(canvas),然后需要对方实时看见,那就需要web socket。而webScoket又需要配置环境,如果想用的更好一些,可能还需要一些后台知识。所以说重要的是能将这些知识结合在一起。
如果有更好的表现还需要看一下css3的相关知识,这些都能够很大程度的减少工程量。

整理了整整一个下午,可能不是很完善,但是希望可以有所帮助。

链接中的资料绝对都是很好的资料,而且绝大多数都是来自国外,自习看一下,绝对很有帮助

更多参考
– MDN html5
– inter html5
– jquery 官方文档
– jquery 中文文档
– w3cplus