Google的Logo设计师全是疯子---记现代舞先驱玛莎·葛兰姆117周年诞辰

今天google的logo继吃豆游戏之后又一次令我大吃一惊---那帮疯子（Logo设计师们）又用JS+png做出了一段华丽的动画！先来看一下效果（可能您看google主页的时候已经它已经换掉了所以我拷下来一份）！ 不知道您是否和我一样感觉google那帮设计师确实是疯子！牢骚至于还是简单说下原理吧，以免哪天您也有点“发疯”的意向也好能用得上。下面贴上主要代码：
 1 function () {
 2 var a = d[f],
 3 c = document.getElementById("hplogo");
 4 if (c && a[0]) {
 5 var b = document.createElement("div");
 6 b.id = "hplogo" + f;
 7 b.style.left = a[0] + "px";
 8 b.style.top = a[1] + "px";
 9 b.style.width = a[2] + "px";
10 b.style.height = a[3] + "px";
11 b.style.background = "url(http://www.front2end.cn/wp-content/uploads/graham11-hp-sprite.png) no-repeat " + -g + "px " + -h + "px";
12 b.onmousedown = k;
13 a[3] > i && (i = a[3]);
14 a[4] ? (g = 0, h += i, i = 0) : g += a[2];
15 c.appendChild(b); ++f;
16 f < e && (j = window.setTimeout(l, 83))
17 }
18 }
原理就是用javascript创建动画的每一帧，用div展示，并加载背景图片，随着每一个Div的创建就会形成一段动画，有点像小时候玩的皮影画（不知道是不是叫这个名字）。 js代码下载：googleDance
posted @ 2011-05-11 17:29 古道 阅读(4541) 评论(23) 编辑 收藏

　回复　引用　查看　  
#1楼2011-05-11 17:34 | younyoung      
一开始看到的时候我以为就是个gif，没想到这么牛啊……
　回复　引用　查看　  
#2楼2011-05-11 17:36 | 王其荣的博客      
那得多少张图片？
　回复　引用　查看　  
#3楼[楼主]2011-05-11 17:39 | 古道      
@王其荣的博客
N张但是放在了一张上面
　回复　引用　查看　  
#4楼[楼主]2011-05-11 17:42 | 古道      
晕，发完才发现和今日的推荐头条撞车了.....
　回复　引用　查看　  
#5楼2011-05-11 17:56 | 董懂      
确实不一样，但是我不知道怎么就是“疯子”了？是js牛一些，还是png设计的牛一些？还是两个都非常牛，见所未见闻所未闻？
　回复　引用　查看　  
#6楼2011-05-11 17:58 | 冲锋号响起      
恩 是N张，放一张每一个DIV 显示不同图片的位置部分。

这个是通过精确计算得到的图片。

很有创意。
　回复　引用　查看　  
#7楼2011-05-11 17:58 | 假正经哥哥      
呵呵，我觉得做出来不牛，有这个想法就牛
　回复　引用　查看　  
#8楼2011-05-11 18:10 | Nero.Pang      
太烦啦，为啥不直接GIF？一张张图片拼接一起，然后显示不同位置的图像，为了证明自己技术有多牛逼？
　回复　引用　查看　  
#9楼2011-05-11 18:23 | Code0Chen      
疯子啊
　回复　引用　查看　  
#10楼2011-05-11 18:26 | 菜阿彬      
用CSS Sprite技术，没啥疯的
　回复　引用　查看　  
#11楼2011-05-11 18:27 | 那一剑风情      
我改的，看看行不：
<div id="lga">
<style>
#hplogo{background:white;cursor:pointer;height:156px;position:relative;width:403px}
#hplogo div{pointer-events:none;position:absolute}
</style>
<div id="hplogo">
<a href="/search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&amp;ct=graham11-hp&amp;oi=ddle&amp;hl=zh-CN"><img title="现代舞先驱玛莎·葛兰姆 117 周年诞辰" border="0" alt="现代舞先驱玛莎·葛兰姆 117 周年诞辰" src="graham11-hp-start.png"></a>
<script>
var point=[[307,48,88,89],[307,48,89,89],[307,48,91,89],[305,49,93,89],[305,50,93,88],[305,50,93,88],[306,52,92,86],[305,53,93,84],[305,54,94,83],[306,54,93,83],[307,54,92,83],[307,54,92,83],[308,54,90,83],[308,54,90,83],[306,53,91,84],[306,53,91,84],[308,53,90,84],[308,53,90,84],[305,53,92,84],[305,52,92,85],[306,52,91,85],[308,51,88,87,1],[308,50,88,88],[308,49,88,88],[307,49,89,88],[307,50,89,87],[308,51,89,86],[307,54,90,83],[307,57,90,80],[306,58,92,79],[306,58,92,79],[305,60,92,77],[302,61,95,76],[302,63,95,74],[302,51,96,86],[302,66,98,71],[304,67,96,69],[301,63,96,74],[301,58,93,79],[291,52,94,85],[288,50,71,88],[285,43,76,95],[285,37,70,101],[281,29,55,109],[278,20,58,119],[278,20,55,119,1],[277,12,121,127],[271,2,122,138],[267,1,126,139],[264,0,136,140],[260,0,141,140],[255,0,148,140],[252,0,151,140],[249,2,121,138],[247,3,123,137],[246,3,123,137],[246,2,124,137],[258,2,112,137],[263,2,106,137],[263,2,106,137],[262,2,103,137],[260,2,104,136],[260,2,104,137,1],[268,2,98,137],[267,2,99,137],[266,2,97,137],[266,3,96,136],[264,3,99,136],[263,3,100,136],[261,3,100,136],[259,2,138,137],[254,2,126,137],[247,2,101,136],[240,2,108,136],[238,1,110,137],[230,1,118,138],[220,15,128,124],[211,18,137,121],[205,43,102,96],[202,45,104,93],[200,38,97,101],[198,38,104,101,1],[197,39,107,100],[197,39,112,100],[213,39,94,110],[212,40,95,111],[211,41,97,111],[209,42,99,112],[209,43,98,112],[213,43,87,112],[213,42,83,113],[211,40,86,109],[211,38,86,103],[211,37,88,112],[211,20,186,131],[213,27,167,122],[212,44,87,105],[210,44,88,98],[195,44,106,98],[189,44,110,98],[182,46,117,99],[173,44,118,96,1],[161,43,130,99],[154,42,137,97],[153,42,137,97],[153,42,137,97],[152,41,137,98],[151,41,137,97],[149,41,145,97],[148,25,144,114],[148,13,144,126],[141,12,153,127],[115,11,173,128],[108,7,180,133],[108,4,180,136],[108,3,176,137,1],[108,1,161,139],[105,1,235,138],[103,1,295,148],[103,0,277,149],[108,0,234,137],[101,0,232,137],[99,0,135,139],[95,0,244,139],[81,0,152,139],[69,0,164,139,1],[66,0,169,139],[65,0,170,139],[63,0,168,138],[61,0,159,138],[35,0,304,139],[19,0,189,140],[18,11,138,129],[18,11,137,129],[18,11,137,128],[18,6,135,133],[7,4,146,136],[6,4,147,136],[3,4,150,136,1],[3,5,150,135],[3,8,150,132],[4,6,394,145],[12,6,388,145],[11,8,389,144],[11,8,387,144],[11,8,387,143,1],[10,8,113,131],[11,8,111,131],[10,9,112,130],[12,9,116,130],[12,9,111,130],[12,9,111,130],[12,9,110,131],[12,34,113,106],[13,35,110,104]];
var px = 0;
var py = 0;
var maxy = 0;
var i = 0;
var pointLength = point.length;
var logoInterval;
function logoAnimate(){
	if(i>0){
		if(point[i-1].length == 5){
			px = 0;
			py += maxy;
			maxy = 0;
		}else{
			px += point[i-1][2];
		}
	}
	maxy = maxy > point[i][3] ? maxy : point[i][3];
	var eleLogo = document.createElement("div");
	eleLogo.style.left = point[i][0]+"px";
	eleLogo.style.top = point[i][1]+"px";
	eleLogo.style.width = point[i][2]+"px";
    eleLogo.style.height = point[i][3]+"px";
	eleLogo.style.background = "url(\"graham11-hp-sprite.png\") no-repeat "+-px+"px "+-py+"px";
	eleLogo.id = "hplogo"+i;	
	document.getElementById("hplogo").appendChild(eleLogo);
	i++;
	if(i>=pointLength){
		window.clearInterval(logoInterval);
	}
}
logoInterval=window.setInterval("logoAnimate()",83);
</script>
</div>
</div>

　回复　引用　查看　  
#12楼2011-05-11 18:35 | 张淼      
@Nero.Pang
那样会很慢的，体验肯定不好
　回复　引用　查看　  
#13楼2011-05-11 18:38 | jaj      
人家是google啊
　回复　引用　查看　  
#14楼2011-05-11 18:56 | 诺贝尔      

这不过是最简单的设计(从思想上)吧.

当然效果不错就是了.
　回复　引用　查看　  
#15楼2011-05-11 21:06 | 徐少侠      
引用冲锋号响起：
恩 是N张，放一张每一个DIV 显示不同图片的位置部分。

这个是通过精确计算得到的图片。

很有创意。

用DIV显示图片的局部。
google一直是这么干的。
当年08奥运时候我就见过他这么搞过。
并且加载一张大图比N张小图要节约时间。
　回复　引用　查看　  
#16楼[楼主]2011-05-11 21:51 | 古道      
@那一剑风情
不错！
　回复　引用　查看　  
#17楼[楼主]2011-05-11 21:53 | 古道      
@菜阿彬
我看不止吧！
　回复　引用　查看　  
#18楼2011-05-11 22:49 | 鞠强      
没看懂,这个代码不就是循环放映不同的图片吗,x/y全部不同而已。这个由难度吗？
　回复　引用　查看　  
#19楼2011-05-12 08:42 | Dic4000      
关键是创意,很好的创意啊
　回复　引用　查看　  
#20楼2011-05-12 09:06 | Cox.Hsiang      
创意想法比较关键，技术仅仅是实现想法的而已
　回复　引用　查看　  
#21楼2011-05-12 10:24 | 高级打字员      
顶～
　回复　引用　查看　  
#22楼2011-05-12 17:38 | 小谷      
惊人，不知道初期的时候画了多少张图，多少原稿，概念-思路-方案-编辑-调试-选择最终效果！！！只为了这一天的logo,顶尖人才！！！！
　回复　引用　查看　  
#23楼2011-05-12 21:46 | mickeysuda      
@小谷
顶
最新IT新闻:
· 谷歌将出售Clearwire股份 不到收购价1/10
· 为什么Google比苹果更令微软恐惧？
· 思科拟2.71亿美元收购私有公司Lightwire
· 社交商务公司Bazaarvoice将于2月24日进行IPO
· 戴尔收购备份软件公司AppAssure
» 更多新闻...
Related Posts with Thumbnails