从google今天的玛莎·葛兰姆doodle说开去

今天是玛莎·葛兰姆117周年诞辰的日子，google的doodle想必大家都看到了，帅气吧。

这当然不是我一个人说和评判的，了解下就行，点到为止。

其实简单的说帅气是不能表达的，把今天这个DOODLE拿出来说的原因主要是如此的 创意加技术，着实让人不能不佩服如此强大的功能。

也许国内诸多大牌互联网公司实现如此简单的功能还是小菜一碟的，因为这样的技术就是简单的css sprite技术，再配简单的JS控制好时间。

使用张初始图片 /uploads/cjt/202005/30/202005graham11-hp-start.png  

再加上一张画满各个动作的拼接图片

大致的css sprite技术可以这样描述：

把css属性全给保存到js数组里面了，动态的创建了div模拟动画了效果！

实现原理：

1、需要懂得源动漫原理，这个估计画过动漫的人都会，画出动画，然后把每一帧动作进行css sprite成，做到一个背景图上面。

2、大家看css sprite图片的时候会发现，每个动作原型都在一行，动作所占用的大小也是一样的，便于css控制，就相当于把flas给导出每一帧，然后按动作顺序成了。

3、js动态创建出来div， 通过改变创建出来div的背景图片的background-position来控制显示出来的图片，然后同时控制div的left top位置（创建的div是定位的）。前端开发工程师们事先把div的位置和背景图片的位置都没计算好了，然后封装到JS里面，执行js后就模拟出来了css动画效果，于大家看不到css和div，其实是这些东西全写到js里面了，都是js生成的！原理其实也很简单，相信学过flash的童靴会更容易的明白，在舞台上面不停的切图帧就可以了，图片切换的快了就成动画了！

可以通过一些工具来查看google今天的源码，会更能明白，当然这样的工作需要图形人员的配。

google诞生于1998年，在诞生之前有过一些小雏形，不过没被真正记入GOOGLE的发展历程，发展今已近13个年头了。

在起初的二年（98/99）时间内，不管逢节假日还是什么大喜日子，GOOGLE的Logo（暂且这样称吧，因为之前还没doodle这个叫法）一直使用原始的，即Larry Page 和 Sergey Brin在1998年为火人节（Burning Man Festival）亲自设计的徽标，而这个徽标一直沿用现在，除了那些“不寻常的日子“。直到时任GOOGLE的网管黄正穆在2000年为法国国庆日（Bastille Day）设计了节日徽标之后，黄正穆正式成了Google Doodle的设计师。当然现在Google有一个五人的doodle团队，包括首席画师Micheal Lopez、Susie Sahim， Jennifer Hom， Ryan Germick 和 Mike Dutton，来为Doole的展现做奉献。

黄正穆

Doodle一词也就这样叫开了，Doodle一词也算是GOOGLE兴起的，而黄正穆本人也被许多人当作追崇的对象。

过了N久后的某，这找了一资料还是没找到，如果谁知道，告诉偶一声，我表示感谢，GOOGLE想想把所有的doodle放在网上让别人了解，于是有了这样的一个google doodle大全的页面。

当然还有一些未被推出的DOODLE，有兴趣的同学可以去找找，也是可以找到的。

原文：http://hugo.wutongshu网站站点" rel="nofollow" />