Google首页google Bar的跳动效果简易实现

好久没写文章了，过完春节人也变得更懒惰了。还是年前同事提起google首页下面几个小点点跳动的动画怎么实现的问题，拖到现在才整理一下。

以前还没怎么在意google下面的这个googleBar，以为只是几个好玩的动画图片而已，但仔细看来，竟然这些玄妙的动画效果仅仅来源于一张图片：

奥妙之处就在于javascript和style的混合运用。通常，我们在HTML中可以用background-image给一个元素设置一个背景图片，并且用background-repeat来指定北京图是否平铺或者拉伸等，但我们也可以用background-position来指定只显示背景图中指定区域，即不将整个图片做北京，而取图片的一部分作为背景。googleBar里就用了很多类似于这样的style设置：

Code

Google的源代码很冗长，且经过了代码压缩和混淆处理，看起来很吃力。不过，我还是耐心的看完了它的js代码，可以看得出来它做了很好的封装。为了能更好的直白的理解其实现原理，我写了一个简易的程序来实现它，我写得确实非常简易和原始，几乎没有任何封装，而且将google里自动生成组装html部分我直接将html写出来了。不过，这个代码还是有点问题，特别是从一个点直接移动到另一个点时就不能分别处理各自的动画。

Code