仿Google+相册的动画

在使用Google+的时候，查看某一相册，会经常看到，如下图所示的动画效果。

鼠标移入、移出时均有动画效果，咋一看估计是使用了css3的transform属性来实现动画效果的。

在网上搜索“Google+ 相册效果”的时候发现有人使用CSS3做了这样的效果，不过使用调试工具查看节点元素的时候，我觉得它是使用JS在进行的控制。所以就用JS顺手写了一个，只是demo，可能还需要改进。

实例暂时仅支持较新版本的：Chrome、Safari、Firefox、Opera（其中Safari动画感觉不太流畅，所有浏览器中Chrome表现最好），示例请使用上述浏览器进行访问，演示地址>>

代码旋转的坐标值都是写死的，而google+里应该是算出来的，这里没有引用其它的js库/框架，代码不算多，思路算比较简单的（有优化的空间，有空封装和折腾一下）。

完整的示例代码：

<!DOCTYPE html>
<html>
 <head>
  <title>Google+相册展示</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv='content-type' content='text/html; charset=utf-8' />

  <style type='text/css'>
    .pw{position:relative;vertical-align:top}
    .pw:active{outline:0}
    .rK{-webkit-box-shadow:0 1px 2px #aaa;-moz-box-shadow:0 1px 2px #aaa;box-shadow:0 1px 2px #aaa;background-color:#fff;border:5px solid #f3f3f3;cursor:pointer}
    
    .uK{-webkit-box-shadow:1px 1px 2px #666;-moz-box-shadow:1px 1px 2px #666;box-shadow:1px 1px 2px #666;left:0;position:absolute;top:0}
    
    .vK{z-index:4}
    .wK{transform:translate(5px,1px) scale(.97);z-index:3;-moz-transform:translate(5px,1px) scale(.97);-o-transform:translate(5px,1px) scale(.97);-webkit-transform:translate(5px,1px) scale(.97)}
    .xK{transform:translate(10px,2px) scale(.94);z-index:2;-moz-transform:translate(10px,2px) scale(.94);-o-transform:translate(10px,2px) scale(.94);-webkit-transform:translate(10px,2px) scale(.94)}
    .yK{z-index:1}
    
    .pw img {width:205px; height:205px;}

    #tipInfo {padding-left:20px;}
    #picContainer {width: 227px; position: absolute; z-index: 5; display:none;}
  </style>
 </head>

 <body>

<button onclick="openAnim()">执行显示动画</button>
<button onclick="closeAnim()">执行关于动画</button>
<span id="tipInfo"></span>

<div class="pw" style="width: 227px; -webkit-user-select: none; margin:120px;" tabindex="0" id="picList">
    <img class="rK uK vK" src="http://1.meteoric.sinaapp.com/images/IMG_0506.jpg" />
    <img class="rK uK wK" src="http://1.meteoric.sinaapp.com/images/IMG_0516.jpg" />
    <img class="rK uK xK" src="http://1.meteoric.sinaapp.com/images/IMG_0548.jpg" />
    <img class="rK uK yK" src="http://1.meteoric.sinaapp.com/images/IMG_0506.jpg" />
</div>


<div class="pw" id="picContainer">
    <img class="rK uK vK" src="http://1.meteoric.sinaapp.com/images/IMG_0506.jpg" />
    <img class="rK uK wK" src="http://1.meteoric.sinaapp.com/images/IMG_0516.jpg" />
    <img class="rK uK xK" src="http://1.meteoric.sinaapp.com/images/IMG_0548.jpg" />
    <img class="rK uK yK" src="http://1.meteoric.sinaapp.com/images/IMG_0506.jpg" />
</div>



<script type="text/javascript">   1:  
   2: //style="-webkit-transform: rotate(-6deg) translate(-72px, -4px) scale(1.0414634146341464); "
   3:     
   4: function getEl(id) {
   5:     return typeof id === "string" ? document.getElementById(id) : id;
   6: }
   7: /**
   8: * @fileoverview Tween
   9: */
  10: function Tween(C, B, A) {
  11:     if (C) {
  12:         this.time = parseInt(C * 1000)
  13:     }
  14:     if (B) {
  15:         this.transform = B
  16:     }
  17:     if (A) {
  18:         this.interval = A
  19:     }
  20: }
  21: Tween.prototype = {
  22:     interval: 40,
  23:     duration: 1000,
  24:     transform: function(A) {
  25:         return 1 - Math.pow(1 - A, 3)
  26:     },
  27:     timer: null,
  28:     isRun: false,
  29:     clear: function() {
  30:         if (this.timer) {
  31:             clearInterval(this.timer);
  32:             this.timer = null;
  33:         }
  34:     },
  35:     start: function() {
  36:         this.clear();
  37:  
  38:         this.timer = this._start.apply(this, arguments);
  39:     },
  40:     _start : function(A, E, D) {
  41:         
  42:         D = D || this.transform;
  43:  
  44:         function H() {
  45:             I += C;
  46:             var J = I / F;
  47:             if (J >= 1) {
  48:                 A(1);
  49:                 E && E();
  50:                 clearInterval(B)
  51:             } else {
  52:                 A(D(J) / G)
  53:             }
  54:         }
  55:  
  56:         var C = this.interval;
  57:         var F = this.duration;
  58:         var G = D(1);
  59:         var I = 0;
  60:         var B = setInterval(H, C);
  61:  
  62:         return B;
  63:     }
  64: }
  65:  
  66: function getOffset(el) {
  67:     var elem = getEl(el);
  68:     var l = 0;
  69:     var t = 0;
  70:  
  71:     while (elem) {
  72:         l += elem.offsetLeft;
  73:         t += elem.offsetTop;
  74:  
  75:         elem = elem.offsetParent;
  76:     }
  77:  
  78:     return [l, t];
  79: }
  80:  
  81: var tween = new Tween();
  82: var imgArr = getEl("picContainer").getElementsByTagName("img");
  83: var ua = navigator.userAgent;
  84: var isWebkit = /AppleWebKit/.test(ua);
  85: var isFF = /Firefox/.test(ua);
  86: var isOpera = /Opera/.test(ua);
  87:  
  88: tween.duration = 300;
  89:  
  90: function openAnim() {
  91:     getEl("tipInfo").innerHTML = "";
  92:     getEl("picContainer").style.display = "block";
  93:  
  94:     function M(I) {
  95:         var a = isWebkit ? "WebkitTransform" : "MozTransform";
  96:         a = isOpera ? "OTransform" : a;
  97:  
  98:         imgArr[0].style[a] = "rotate("+ -6 * I +"deg) translate("+ -72 * I +"px, "+ -4 * I +"px) scale(1)";
  99:         imgArr[1].style[a] = "rotate(0deg) translate(0px, "+ -4 * I +"px) scale(1)";
 100:         imgArr[2].style[a] = "rotate("+ 6 * I +"deg) translate("+ 72 * I +"px, "+ 4 * I +"px) scale(1)";
 101:  
 102:         getEl("tipInfo").innerHTML = "显示动画正在执行...";
 103:     }
 104:  
 105:     function N() {
 106:         getEl("tipInfo").innerHTML = "显示动画执行完成";
 107:  
 108:         getEl("picContainer").onmouseout = closeAnim;
 109:         getEl("picList").onmouseover = null;
 110:  
 111:         getEl("picContainer").onmousemove = function() {
 112:             tween.clear();
 113:         }
 114:     }
 115:  
 116:     tween.start(M, N);
 117: }
 118:  
 119: function closeAnim() {
 120:     getEl("tipInfo").innerHTML = "";
 121:  
 122:     function M(I) {
 123:         I = 1 - I;
 124:         
 125:         var a = isWebkit ? "WebkitTransform" : "MozTransform";
 126:         a = isOpera ? "OTransform" : a;
 127:  
 128:         imgArr[0].style[a] = "rotate("+ -6 * I +"deg) translate("+ -72 * I +"px, "+ -4 * I +"px) scale(1)";
 129:         imgArr[1].style[a] = "rotate(0deg) translate("+(5 - 5 * I)+"px, "+ (1 + -5 * I) +"px) scale(0.97)";
 130:         imgArr[2].style[a] = "rotate("+ 6 * I +"deg) translate("+ (10 + 62 * I) +"px, "+ (2 + 2 * I) +"px) scale(0.94)";
 131:  
 132:         getEl("tipInfo").innerHTML = "关闭动画正在执行...";
 133:     }
 134:  
 135:     function N() {
 136:         getEl("tipInfo").innerHTML = "关闭动画执行完成";
 137:  
 138:         getEl("picContainer").style.display = "none";
 139:  
 140:         getEl("picContainer").onmouseout = null;
 141:         getEl("picList").onmouseover = openAnim;
 142:         getEl("picContainer").onmousemove = null;
 143:     }
 144:  
 145:     tween.start(M, N);
 146: }
 147:  
 148: !(function() {
 149:     var arr = getOffset("picList");
 150:     var elem = getEl("picContainer");
 151:  
 152:     elem.style.left = arr[0] + 'px';
 153:     elem.style.top = arr[1] + 'px';
 154:  
 155:     if (!isWebkit && !isFF && !isOpera) {
 156:         var btns = document.getElementsByTagName("button");
 157:         for (var i = 0, len = btns.length; i < len; i++) {
 158:             btns[i].disabled = true;
 159:         }
 160:     } else {
 161:         getEl("picList").onmouseover = openAnim;
 162:     }
 163: })();
 164:  
</script>

 </body>
</html>

posted @ 2012-02-02 12:42 meteoric_cry 阅读(614) 评论(0) 编辑收藏举报

刷新页面返回顶部

仿Google+相册的动画

公告