百度终于要牛逼一把了!

在 Logo 的创新性、趣味性上从来都比不过 股沟网(Google.com)的 百度今天终于洋气了一把。

因为明日凌晨,好莱坞大片《变形金刚3》零点场将正式上映。百度乘机在百度知道里面做了一个特效!正如下面的截图,百度搜索结果会完成一次变形,虽然这个金刚并不太威猛,不过行走起来,能将就吧。
百度知道-变形金刚

提示:你可以先修改部分代码再运行。

实际效果预览:http://julying.com/demo/baidu-bianxingjingang/

具体效果Javascript 下载:http://julying.com/demo/baidu-bianxingjingang/bianxingjinggang.js

(这里面包含百度自己的一个小型函数库 和 定义好的机器人变形的数据)。

大致原理比较简单:

用 js 建立若干个 小的 box,然后讲搜索结果分别移位放置到 box 里面,

然后预先定义一个时间,让预先定义好的 box 做一个移位,看起来像机器人变形。

如果要程序员做这样一个动画,其实是很麻烦的。因为机器人变形是要预算算出来的,放在数组里面预定义好。像这样一个机器人变形,要用到接近600个数据。

就像以前股沟网(Google.com)的logo特效,很多都是要预先存储很多数据,才能展现动画效果。

这就是 js 动画迟迟没有发展的一个重要原因:js几乎没有处理图像功能,完全依靠css,浏览器自身的一些效果来模拟动画。

而 flash 的as 因为有flash客户端 ,可以直接处理图像,处理矢量图像,制作动画是相当轻松。

———————

或者,换一个角度讲:百度搜索结果的变形金刚可以看做:通过 js 建立一些 box,让 box 做变型,然后讲搜索结果当做颜色一样填充在机器人表面!。

制作一个机器人变形不好玩!而百度这个微原创,是将搜索结果和机器人变形结合起来,看起来就有点意思了。

其实这样好玩的javascript 效果代码非常多!而让人感觉到耳目一新、有意思的创新是需要将那些“死代码”包装、整合起来的。