HTML 5 实现小车动画效果(1)

HTML5正在变得越来越流行。在这个移动设备日益增长的时代,对来自Adobe的Flash插件的改造需求也正在快速增长。因为就在最近,Adobe宣布Flash将不再支持移动设备。这意味着,Adobe自身也认为对移动设备来讲HTML5是一项重要的技术。而桌面系统的改变也是迟早的事。

HTML5的一大劣势就是对于多媒体技术支持的缺乏。在HTML中,你无法直接显示一个视频或在屏幕上绘画。在HTML5中,随着<video>与<canvas>元素的引进。这些元素给予开发者直接使用“纯粹的”HTML来实现多媒体技术的可能性——仅需要写一些Javascript代码来配合HTML。在多媒体技术中,有一个基本的技术应该被支持——动画。在HTML5中,有不少方式能够实现该功能。

在这篇文章中,我仅将最新的<canvas>元素与即将到来的CSS3动画技术进行比较。其他的可能性包括DOM元素或SVG元素的创建和动画。这些可能性将不在本文中进行讨论。从开始就应该注意到canvas技术在当前发布的大部分主流浏览器都给予了支持,而CSS3动画仅在最新的FireFox与Chrome浏览器中才有实现的可能,下一个版本的IE也将提供对CSS3动画的支持。(所以本文中所有演示代码的效果,在Win 7系统下当前最新版的Chrome浏览器中都可实现,但在其他操作系统与其他浏览器中,并不一定能看到所有演示代码的效果)。

这里我选择了一个比较简单的动画:

HTML 5 实现小车动画效果(1)

PS:由于显卡、录制的帧间隔,以及可能你电脑处理器的原因,播放过程可能有些不太流畅或者失真!

分三种方式实现:

(1)   canvas元素结合JS

(2)   纯粹的CSS3动画(暂不被所有主流浏览器支持,比如IE)

(3)   CSS3结合Jquery实现

知道如何使用CSS3动画比知道如何使用<canvas>元素更重要:因为浏览器能够优化那些元素的性能(通常是他们的样式,比如CSS),而我们使用canvas自定义画出来的效果却不能被优化。原因又在于,浏览器使用的硬件主要取决于显卡的能力。目前,浏览器没有给予我们直接访问显卡的权力,比如,每一个绘画操作都不得不在浏览器中先调用某些函数。

更多相关文章
  • 前面介绍过<用c#开发微信 (20) 微信登录网站 - 扫描二维码登录>,本文介绍如何用支付宝扫描二维码登录网站.      1 注册企业支付宝帐号 https://enterpriseportal.alipay.com/login.htm 2 实名认证 提供公司相关证件进行实名认证,提 ...
  • VPN任务栏里没有显示解决   问题连接VPN  勾选属性里面的在桌面上显示图标,结果没有显示. 1.处理方法重新设置VPN 连接(记住你以前的用户名和密码) 2.重设VPN的图解 2.1   2.2 2.3 2.4 2.5 2.6 2.7  
  • 网线制作方法(RJ45水晶头接法)   一般有如下几种情况:   1)对等网(两台计算机的网卡直接互连):采用交叉线接法,网线两端接法不同.   2)网卡与交换机(或HUB):采用直通线接法,网线两端接法相同.   3)交换机与交换机(或HUB)级联:采用交叉线接法,网线两端接法不同.    双绞线 ...
  • 8月6日消息,据部分用户向TechWeb爆料,自今日晚间7点42分开始,腾讯手机QQ出现登录不上的情况.另有网友透露腾讯手机QQ遭到黑客攻击导致登录异常.此外,有媒体报道,腾讯旗下的有些游戏登录也会失败. 对此腾讯手机QQ在其微博上表示:有部分用户在登录QQ时遇到提示冻结或失败,我们已经关注.目前正 ...
  • 关于DDD的理论知识总结,可参考这篇文章. DDD社区官网上一篇关于聚合设计的几个原则的简单讨论: 文章地址:http://dddcommunity.org/library/vernon_2011/,该地址中包含了一篇关于介绍如何有效的设计聚合的一些原则,共3个pdf文件.该文章中指出了以下几个聚合 ...
  • Test-Driven Development PrinciplesTDD consists of writing test cases that cover a desired feature, then writing the feature itself. In other words, th ...
一周排行
  • 转:http://blog.csdn.net/inject2006/article/details/3064399 如果你想利用VMWare安装虚拟机,或想创建一个与网内其他机器相隔离的虚拟系统,进行特殊的调试工作. ...
  • //查看指定文件CPU使用记录 #sar -f /var/log/sa/sa03 1 CPU %user %nice %system %iowait %idle 1 all 52.32 0 ...
  • 多伦多大学蒙克顿国际研究中心"公民实验室"发表了一项伟大的研究成果:经过10个月的研究,他们发现了一个"基地设在中国境内.大规模的"互联网间谍网络.这个"鬼网&quo ...
  • 之前做项目要对图片的查看,然后就自己写了一个,适合对图片的浏览,跟系统图库的效果一样哦,先贴一张美女图片,听说有美女,男人就会多看一眼,不知道是不是真的,布局文件需要注意的一点是 scaleType一定要是 matr ...
  • 在大学中,除了学习,还要有足够的与人交往,以此发展全面的能力.我看好学生社团的作用,但角色已经由深度参与向幕后支持转变,将社团的发展真正交给大学生运作.一位在社团活动中经历了不和谐的同学给我来信诉说,我也以下面的文字 ...
  • 指令 功能 应用实例 LB 从存储器中读取一个字节的数据到寄存器中 LB R1, 0(R2) LH 从存储器中读取半个字的数据到寄存器中 LH R1, 0(R2) LW 从存储器中读取一个字的数据到寄存器中 LW R ...
  • 近日,ICANN的高层对国际刑警组织秘书长总部进行了一次具有里程碑意义的访问,此举使这两个国际性机构在互联网安全上赢得探索到更密切合作途径的机会.随着网络安全.金融和高科技犯罪等重要议题的提出,ICANN总裁兼首席执 ...
  • 将项目文件.project文件的<natures>...</natures>代码段中加入    <nature>org.eclipse.wst.common.project.fac ...
  •                                                                     <入职>      完成了达内毕业项目设计后毕业,毕业后工作并没有那 ...
  •     关于IPC应该不用多介绍了,Android系统中的进程之间不能共享内存,那么如果两个不同的应用程序之间需要通讯怎么办呢?比如公司的一个项目要更新,产品的需求是依附于当前项目开发一个插件,但是呢这个插件功能以及 ...