仿Google+相册的动画

meteoric

发布于 2018-11-16 14:53:47

8380

发布于 2018-11-16 14:53:47

文章被收录于专栏：游戏杂谈

在使用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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2012-02-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

仿Google+相册的动画

仿Google+相册的动画

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐