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 ...
一周排行
  • #1234# mybatis; #12345678# #123#.io.File; #12345678# #123#.sql.Connection; #12345678# #123#.sql.DriverManage ...
  • WPF进入我们的生活已经很多年.(写这句话让我想起来了“我不做大哥好多年”.) 个人认为在UI的实践中,用户需要的是易于操作的,更加绚丽的界面.这两个应该是最基本.也是最重要的宗旨.而对于开发人员就是要用最简单的方法 ...
  • 1.关于2000附加2005 的数据库问题 错误描述: 1.未能在 sysindexes 中找到数据库 ID 13 中对象 ID 1 的索引 ID 1 对应的行.请对 sysindexes 运行 DBCC CHECK ...
  • 1.从9月1日开始,新入网客户在广东移动沟通100服务厅购买三大品牌的sim卡,需要提供有效证件进行实名登记. 2.广东移动开放了多个渠道,方便客户进行实名登记:一是登陆网站www.gd.10086.cn:二是发送短 ...
  • echo ,print的区别在于echo 可以输出多个变量值,而print只有一个变量,做为一个字符串输出. 另一点区别在于echo 没有返回值,print有返回值1.print不能输出数组和对象. print_r可 ...
  • 网站名称:Webkinz.com 上线日期:2005年 所在地点:加拿大 加拿大玩具公司Ganz非常了解如何为儿童打造在线社区.这家公司于2005年推出在线游戏社区网站Webkinz(中文名为"秀娃世界&q ...
  • .把所有想法全部记录到doit中: .使用doit来部署各种周期性任务,这样让我觉得生活井井有条: .对于某个明确时间点的任务,如果只是精确到年月日,则使用doit,如果精确到小时,则直接加到google日历,会同步 ...
  • 选择结构-if if(表达式) {}   {}为作用域 多重if-else  例如: #include <stdio.h> int main(){ int amount = ; if(amount< ...
  • 在Android开发中,读取手机通讯录中的号码是一种基本操作,但是由于Android的版本众多,所以手机通讯录操作的代码比较纷杂,在本文中进行一下总结. Android1.5是现在的Android系统中最低的版本,首 ...
  • 写 1 private void Button_Click_1(object sender, RoutedEventArgs e) 2 { 3 IsolatedStorageFile isf = IsolatedSt ...