专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

google css、js实现的动画 logo

google纪念玛莎·葛兰姆的logo,一大早就听群里面讨论,也许这个logo创意不错,得到大家的热捧。晚上抽空研究了下google的实现方法,此次的logo利用css的背景图定位+js实现。

自己找了个gif图改成css sprite背景图,做了个演示:查看
google的那个logo动画:查看

css、js部分其实不难,不过话说google攻城师的水平真不错。难点是把原始动画制作成CSS Sprites的部分,要规划好:如何才能用最小的图实现这个动画,如果仅仅单纯把动画里每帧的图铺起来,那意义就不是很大了。下面是注释过的js部分:

(function() {
	var K = {
		get:function(I){
			return document.getElementById(I);
		},
		create:function(T){
			return document.createElement(T);
		},
		remove:function(E){
			return E && E.parentNode && E.parentNode.removeChild(E);
		},
		on:function(E, N, FN){
			E.addEventListener ? E.addEventListener(N, FN, !1) : E.attachEvent("on" + N, FN);
		}
	},
	//把每个div的left、top、width、height信息存在js数组里
	coords = [
		[1, 6, 70, 74], [10, 4, 70, 76], [10, 4, 69, 76], [9, 4, 69, 76], [8, 4, 70, 76], [8, 5, 69, 75], [8, 6, 68, 74], [7, 6, 69, 74], [6, 7, 69, 73],[6, 6, 69, 74, 1], // 这里多了个值,表示下面开始调用背景图的下一行了
		[5, 6, 69, 74], [4, 6, 70, 74], [4, 6, 70, 74], [3, 6, 70, 74], [2, 6, 70, 74], [1, 6, 70, 73], [1, 6, 70, 74], [1, 6, 70, 74], [1, 7, 70, 73], [1, 7, 70, 73, 1], [1, 6, 70, 74], [1, 6, 70, 74], [1, 7, 70, 74], [1, 7, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74, 1], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74]
	],
	length = coords.length, num, repeatX, repeatY, rowHeight, timer = -1,
	logoId = K.get("hplogo"),
	nav = function() {
		alert("跳转页面");
	},
	draw = function() {
		var arr = coords[num];
		if ( logoId && arr[0]) {
			var b = K.create("p");
			b.id = "hplogo" + num;
			b.style.left = arr[0] + "px";
			b.style.top = arr[1] + "px";
			b.style.width = arr[2] + "px";
			b.style.height = arr[3] + "px";
			b.style.backgroundPosition = - repeatX + "px " + - repeatY + "px";
			b.onmousedown = nav; //for IE、opera 点击涂鸦跳转
			arr[3] > rowHeight && ( rowHeight = arr[3]); //记录当前背景片段所在行的高度(sprite图片中)
			//如果有arr[4],就表示开始调用背景图的下一行了,背景图的y坐标就需要 + 上一行的高度;背景x坐标当然要重置为0了, rowHeight当然也重置为0。
			//如果没有arr[4],表示还在调用同一行的背景图,那么只需要增加x坐标的位置就OK了。
			arr[4] ? ( repeatX = 0, repeatY += rowHeight, rowHeight = 0) : repeatX += arr[2];
			logoId.appendChild(b);

			//本动画比google 动画简单,上一帧图像没有用途,所以直接隐藏掉了,google的那个这句就没必要了
			num != 0 && (K.get("hplogo"+(num-1)).style.display="none");

			++ num;

			//num < length && ( timer = setTimeout( draw, 83)); //播放1次

			timer = setTimeout( draw, 120); num === length && init(); //循环播放
		}
	},
	init = function() { //加载sprite图片完成,开始涂鸦
		rowHeight = repeatY = repeatX = num = 0; //变量值初始化

		//下面的代码起到循环播放的作用;只播放一次,可以删掉
		timer != -1 && (clearTimeout( timer), timer = -1);
		for (var a = 0; a < length; ++a) {//如果已经添加了动画div,就移除
			K.remove(K.get("hplogo" + a))
		}
		draw(); // 开始涂鸦
	};
	//加载完成后才绘制动画
	var bg = K.create("img");
	K.on(bg,"load",init);
	bg.src = "sprite.png"
})();

对比这个葛兰姆logo,我更喜欢“罗伯特·本生诞辰200周年”的logo,利用canvas、css、js。

verne,这个也还可以,支持css3的浏览器使用transform来做动画,不支持css3使用position来定位实现。

围观更多logo:http://www.google.com/logos/index.html

/ 分类: 开发,实践 / TrackBackhttps://blog.xhl.me/archives/martha-graham-google-logo/trackback标签: css, javascript

添加新评论 »