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 ...
一周排行
  • 很多IT网友都知道架构师工资高,但不知道到底具备哪些素质工资才高? 不过也想工资高,于是拼命学习,N时间后,发现自己的工资还是再原地不动,或者没涨多少, 于是很困惑.过来找老男孩问个究竟. 其实架构师的工资也不都是很 ...
  • 题目在这里:Question:关于C#连续赋值的面试题 在msdn中,对=号操作符的说明如下: 赋值运算符 ( =) 将右操作数的值存储在左操作数表示的存储位置.属性或索引器中,并将值作为结果返回.操作数的类型必须相 ...
  • 易网科技讯 4月27日消息,今天下午,苏宁子公司PPTV聚力发布了电视操作系统PPOS开放计划.苏宁黑电事业部副总经理常江对外表示,未来一年计划卖出300万台搭载PPTV自主研发的PPOS系统电视,其中自主品牌占10 ...
  • 原题链接: http://oj.leetcode.com/problems/spiral-matrix/ 这道题是比较简单的数组操作,按螺旋顺序把数组读取并且放到结果数组中即可.基本思路跟Rotate Image有点 ...
  • 测试进程 Alpha测试 Alpha测试通常是阶段性的开发完成后所开始进行,一直持续到进入Beta测试阶段前的阶段.Alpha测试是一种验证测试,在模拟的环境中以模拟的数据来运行.在这个阶段中,通常是在开发单位由开发 ...
  • 问题描述:   平面上有n条折线,问这些折线最多能将平面分割成多少块?   样例输入   1   2   样例输出   2   7   答案是:    2n ( 2n + 1 ) / 2 + 1 - 2n = 2 n ...
  • [iOS系列]-UIWebView加载网页禁止左右滑动 问题: 做项目时候,用UIWebView加载网页的时候,要求是和微信网页中打开的网页的效果一样,也即是只能上下滑动,不能左右滑动,也不能缩放. 根据要求把web ...
  • C#编程总结(五)多线程带给我们的一些思考 如有不妥之处,欢迎批评指正. 1.什么时候使用多线程?      这个问题,对于系统架构师.设计者.程序员,都是首先要面对的一个问题.      在什么时候使用多线程技术? ...
  • 抽象部分using System; using System.Collections.Generic; using System.Text; namespace BridgePattern { public clas ...
  •   (关于卡特兰数的详细介绍)http://baike.baidu.com/view/2499752.htm  下面有练习的题目: 经过测试,_int64/long long 最大只能表示到33位,超过这个范围就要用 ...