google's tricks

最近一直沉迷在 ant 神奇的自动化中，对于外界很迟钝，但是 google 的首页变化则是无处可避的，最近动作也很多啊：

1.巴克球

 

 

感觉 google 和 canvas 有矛盾？直觉应该使用 canvas 来实现，可分析代码，其实 google 用的是很多 div 来拼成圆型以及柱形，并且该球可以随鼠标移动而滚动，虽不如以前的 pacman （我的pacman ），但也初具操作性。注意 ie 中就仅仅是 gif 图片了。

2.泡泡球？

 

 

 

这个是我感觉最有意思的一个，非常具有动感，所以我把它永久保留了：

google ball

标准浏览器扔由 div 采用 border-radius 拼凑 ，

 

 

 

但是对于ie ，采用了一个小技巧使用字符"."来模拟圆形，设置比较大的font-size与color。所以即使标准浏览器你也会感觉比较拖沓，Rob Hawkes 在采用类似算法的情况下直接canvas实现后，效率提升不错，也永久保留

canvas google ball

 

 

并且还有人用该版本写了个编辑页面：

 

custom ball

 

程序看起来很简洁，逻辑也很清晰，但是关键在于每个组成圆形点的位置与鼠标位置的对应关系，运算规则晦瑟难懂：

 

var dx = mousePos.x - point.curPos.x;
point.targetPos.x =  point.curPos.x - dx;
dx = point.targetPos.x - point.curPos.x;
var ax = dx * point.springStrength;
point.velocity.x += ax;
point.velocity.x *= point.friction;
point.curPos.x += point.velocity.x;

 

3.光标输入同步

 

 

算是这几个花招中最简单的一个，采用两张图片，一张为全彩

 

 

一张为全灰，并且用一个绝对定位很窄的 div 背景设灰，频繁 display 设置来模拟光标闪烁，关键则为 两张图片的宽度计算达到遮盖效果以及模拟光标定位。

4.即时搜索

今日google的重头大戏 ，技术上简单得可以说是 自动补全的升级版，估计又会引起国内互联网企业的群起山寨，但目前我在国内仍需间接访问的环境中试用感觉只有一个字：卡！不具备汪曼颖教授所推崇的流畅感 ，当然相信在google原产地那是相当舒适。

根据官方介绍具有三个功能：

 

 

1.即时搜索

这个即是把原来自动补全的信息应用在了搜索列表区域中。

2.关键词预测

这个是比较有意思的地方，由于搜索单词（英语环境中）片段并没有意思，反而会造成用户困惑以及服务器白白消耗，google会自动将词片段补全为有意思的单词再进行搜索：

 

 

这就和原来的自动补全有区别了：直接在输入框中补全，初步分析实现手段也不难，采用两个输入框，

自动补全输入框为字体灰色，放在下面

用户输入框为字体黑色，放在补全框上方，背景默认透明即可。

即时搜索实际上是只对补全框的值进行搜索。

3.滚动搜索

传统的自动补全框支持键盘上下滚动将滚动处值放入搜索框中，而现在由于有了即时搜索，那么在滚动的同时，屏幕会变灰加在滚动处的提示词搜索结果

总的来说：对于前端只有 2 是新的创新点，而对于后端则要付出更加艰苦的折腾：大量缓存，避免无意义的搜索，准确的预测词都是需要克服的问题。

最后在 techcrunch 看到个雷人评论，纯属转载：

 

 

 

 

 

 

评论

1 楼 bopeng 2010-09-09