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下,实现动画的几种常见方式。
源码下载
分享到:
相关推荐
前几天我已经向大家分享了两款HTML5/CSS3文字特效,尤其是这款HTML5 Canvas字母文字颗粒动画 可设置重力感应,更是动感。今天要分享的这款HTML5/CSS3文字效果也十分帅,鼠标滑过文字时,文字会出现发光的特效,并且...
特效很酷的粒子动态背景jquery特效,粒子连接动画jQuery特效,熔岩效果动态html5背景,网页蔓延html5动画特效背景,炫酷css3宇宙空间轨迹动画特效,炫酷动态粒子canvas特效代码,炫酷几何图形背景HTML5动画特效,...
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
直播点赞动画,canvas和css3动画都有,各有各的好
之前我们分享过不少基于HTML5/CSS3和Canvas的3D立方体旋转动画,比如这款超绚丽CSS3多色彩发光立方体旋转动画,也有基于立方体做的菜单应用,比如超实用CSS3 3D菜单 菜单项悬浮凸出立体效果。今天我们要分享的是一款...
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
jquery html5 canvas翻滚熔岩动画背景特效 jqueryhtml5 canvas翻滚熔岩动画背景特效
之前向大家分享过一款HTML5 Canvas字母文字颗粒动画,效果非常不错,由此可见,利用HTML5和CSS3可以方便的实现很多以前很难实现的文字特效。今天我要向大家介绍一款HTML5/CSS3文字投影特效,它的使用也很简单,HTML5...
Canvas火焰喷射动画效果,CSS3垂直图标菜单 带Tooltip提示框,CSS3多样式小图标按钮 带分享按钮,CSS3可视化网页编辑器 基于tinymce编辑器,CSS3实现一款联系表单 输入框带小图标,HTML5 Canvas模拟衣服撕扯动画 ...
之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,...今天我们要介绍一款也是基于HTML5 Canvas的波浪翻滚动画,它同样有着3D立体的视觉效果,同时波浪在起伏时也伴随的浪花汹涌的动画特效,看上去非常炫酷。
HTML5实现全屏烟花特效,canvas3D动画效果,享受烟花绽放的美丽! HTML5实现全屏烟花特效,canvas3D动画效果,享受烟花绽放的美丽! HTML5实现全屏烟花特效,canvas3D动画效果,享受烟花绽放的美丽! HTML5实现全屏...
新的一周开始了,小编继续要为大家分享实用超酷的HTML5应用,今天分享的这9款最新...整个动画是利用纯CSS3实现,没有用图片和JS,不知道你们的浏览器中效果怎么样。 在线演示 源码下载 3、H[......] 阅读全文>>
2、jQuery/CSS3实现超酷的动画Tab菜单 这是一款基于jQuery和CSS3的动画Tab菜单,这款Tab菜单是以单选框Radio为原型的,通过CSS3样式特性对radio的渲染,形成了一个外观看上去像tab菜单的样子。另外特别的是,tab菜单...
本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果。分享给大家供大家参考。具体如下: 下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5。个人还是比较推荐chrome,这个效果在...
这是一款有创意的HTML5 Canvas+CSS3无限循环滚动叠纸背景动画特效,鼠标点击一下可以停止滚动,再次点击继续滚动,就像暂停播放效果。
HTML5+CSS3源码_Canvas火焰喷射动画效果.rar.rar
html5 canvas画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码
HTML5 CSS3自行车动画特效,用Canvas实现了自行车脚踏板的动画效果,好像有人在骑自行车哦。看上去和Flash动画效果一样,CSS3/HTML5果然很强大。
HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花...
这是一个由html5 CSS3 Canvas 技术生成的彩带飞舞动画,很不错的炫丽效果,没使用任何的图片修饰,全部是Canvas生成的彩带效果,再加入动画的控制(由JavaScript来实现),最终形成了十分炫酷的效果。同时本效果也可...