HTML5实现小车动画效果实现小车动画效果
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浏览器中都可实现,但在其他操作系统与其他
浏览器中,并不一定能看到所有演示代码的效果)
这里我选择了一个比较简单的动画:
PS:由于显卡、录制的帧间隔,以及可能你电脑处理器的原因,播放过程可能有些不太流畅或者失真!
分三种方式实现:
(1) canvas元素结合JS
(2) 纯粹的CSS3动画(暂不被所有主流浏览器支持,比如IE)
(3) CSS3结合Jquery实现
知道如何使用CSS3动画比知道如何使用<canvas>元素更重要:因为浏览器能够优化那些元素的性能(通常是他们的样式,比
如CSS),而我们使用canvas自定义画出来的效果却不能被优化。原因又在于,浏览器使用的硬件主要取决于显卡的能力。目
前,浏览器没有给予我们直接访问显卡的权力,比如,每一个绘画操作都不得不在浏览器中先调用某些函数。
让我们从Canvas开始
HTML代码: