`
tansitongba
  • 浏览: 480098 次
文章分类
社区版块
存档分类
最新评论

HTML5 实现小车动画效果(Canvas/CSS3/JQuery)

 
阅读更多

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


HTML的一大劣势就是对于多媒体技术支持的缺乏。在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代码:

JS代码:

定义一些变量:


为了实例化汽车canvas(初始时被隐藏),我们使用下面的自执行的匿名函数


点击“Play”按钮,通过定时重复执行“画汽车”操作,来模拟“帧播放”功能:


加速,减速,通过以下方法,改变移动距离的大小来实现:


页面加载的初始化方法:


主调方法:


画背景:


画车身:


画轮胎:

由于原理简单,并且代码中作了详细注释,这里就不一一讲解!


该是CSS3出场了

你将看到我们未通过一句JS代码就完全实现了和上面一样的动画效果:

HTML代码:


CSS代码:


定义车身与轮胎转到的动画(你会看到基本每一个动画都有四个版本的定义:原生版本/webkit【Chrome|Safari】/ms【为了向后兼容IE10】/moz【FireFox】)




JQuery与CSS3合体

这是一个效果与兼容性俱佳的方式(特别对于IE9暂不支持CSS3而言)

HTML代码(可以看到与CSS3中的HTML代码并无不同):


CSS:


JS代码:

首先引入在线API:


实现动画代码(相当简洁):


简单讲解:prefix首先识别出当前是哪个定义被采用了(-o?-moz?-webkit?-ms?),然后定义了动画的起点位置和终点位置。接着,定义了设置旋转角度的函数(该函数将在在动画的每一步(step)中执行)。然后,定义了一个动画,该定义方式导致了无限自循环调用!


本文,通过一个简单的动画实例,演示了HTML5下,实现动画的几种常见方式。


源码下载

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics