查看完整版本: 你从没见过的 HTML5 动画效果[8p]

你从没见过的 HTML5 动画效果[8p]

[color=#000][font=Verdana][size=14px]HTML5 的 Canvas 对象将改变 JavaScript 的使命，使之成为 HTML5 下强大的动画脚本编写工具。本文介绍了 8 个你从未见过的，基于 HTML5 Canvas 和 JavaScript 的动画，这些令人难以置信的效果将使你对 HTML5 彻底折服。需要指出的是，这些都是浏览器的原生动画，无需任何插件。
[b][url=http://ghost-hack.com/post/jsexperiments/tunneler/tunneler.html]Tunnelers[/url][/b]

[img=450,200]http://60.209.221.236/i-host/html5-ani/1.jpg[/img]

纯 JavaScript + HTML5 Canvas 生成的交互动画，难以置信。


[b][url=http://danforys.com/mesmerizer/]The Mesmerizer[/url][/b]

[img=450,200]http://60.209.221.236/i-host/html5-ani/2.jpg[/img]

在格子中移动鼠标，颜色随着改变并扩散到周围的格子，很迷幻。用鼠标点四角的格子，或按键盘，可以看到更奇妙的效果。

[b][url=http://guciek.net/test/burn]Burn[/url][/b]
[img=450,200]http://60.209.221.236/i-host/html5-ani/3.jpg[/img]


在页面上移动鼠标，或按下鼠标，这样的效果，很难相信是浏览器原生的。

[b][url=http://spencertipping.com/beta/cheloniidae-live-b1/]Cheloniidae Live[/url][/b]

[img=450,200]http://60.209.221.236/i-host/html5-ani/4.jpg[/img]

也是基于纯粹的 JavaScript，不过使用了一个 JavaScript 库。很有趣，你可以通过修改其 JavaScript 代码实现自己的效果（可惜被墙了）。


[b][url=http://www.xs4all.nl/~peterned/3d]Canvas 3D engine[/url][/b]

[img=450,200]http://60.209.221.236/i-host/html5-ani/5.jpg[/img]

一个基于 Canvas 的 3D 引擎。目前只支持预设的图形，纹理及基本交互功能。


[b][url=http://bomomo.com/]Bomomo[/url][/b]

[img=450,200]http://60.209.221.236/i-host/html5-ani/6.jpg[/img]

很值得一试。


[b][url=http://the389.com/works/three/]DDD[/url][/b]

[img=450,200]http://60.209.221.236/i-host/html5-ani/8.jpg[/img]

这个交互动画也很有趣。


[b][url=http://openrise.com/lab/PlasmaTree/]Plasma Tree[/url][/b]

[img=450,200]http://60.209.221.236/i-host/html5-ani/7.jpg[/img]

非常阿凡达。
[/size][/font][/color]

[size=5][color=Red]友情提示：请不要用IE9 以下浏览器打开。请用谷歌或火狐之类浏览器打开方可感受HTML5的魅力[/color][/size]

[[i] 本帖最后由 sett123 于 2010-6-27 06:01 编辑 [/i]]

恩，试了一下，火狐，OPERA都支持，IE8不支持。

二次编辑：
又有一个发现，OPERA对 HTML5的支持比火狐好。
如在第一个例子中单击左键不放，OPERA的动画效果很流畅，而火狐会比较卡。

再次编辑：
看来我的判断比较片面，发现了火狐优于OPERA的一个地方:第五个例子中，在火狐中显示时点击方框可以显示出相片，OPERA则不行。

[[i] 本帖最后由 mm765710 于 2010-6-26 21:56 编辑 [/i]]

呃  貌似这个东西挺高端  一个都没打开

回复 2楼 的帖子

不错，肯钻研。我个人觉得CHROME效果好一点

有几个动画效果不是一般的好看啊，在音乐播放器里面估计也好用的

这个东东不知道和flash比哪个更好，乔布斯就说就因为这个不支持flash

这也没什么呀！许多工具都能实现的，而且占用资源的换少

我怎么用火狐看的没什么啊，静态的，不动啊。是不是版本问题？

感慨呀，这些技术发展的太快了，感觉都还没进入成熟期呢，又被其他技术追上了

[quote]原帖由 [i]wangtg2005[/i] 于 2010-6-27 09:08 发表 [url=http://67.220.92.23/bbs/redirect.php?goto=findpost&pid=54874864&ptid=3146252][img]http://67.220.92.23/bbs/images/common/back.gif[/img][/url]
我怎么用火狐看的没什么啊，静态的，不动啊。是不是版本问题？ [/quote]
不是看那张图片 有点进去看网页的

最新的标准呀,悲剧的iE不是很好地支持呀,有个网站测试iE的得分只有你19

用的谷歌浏览器，6.0的，只看了最后一个，效果的确很炫。

*** 作者被禁止或删除 内容自动屏蔽 ***

*** 作者被禁止或删除 内容自动屏蔽 ***

哦，我看到的全是静态的啊，没有看到动态的。难道版本不够？

直觉告诉我FALSH要悲剧了，Adobe要悲剧了。当初花了不少钱推广flash

这些动画看起来效果是不错。互联网技术的发展太快了。

看个动画还要再换浏览器 那我还是算了吧

感觉只是个图片看了下图片属性也只是JPG格式的。

这个确实强大啊，都赶上作图工具了，不过这个会不会很麻烦，感觉不如用FLASH简单方便啊