前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >仿Google+相册的动画

仿Google+相册的动画

作者头像
meteoric
发布2018-11-16 14:53:47
8370
发布2018-11-16 14:53:47
举报
文章被收录于专栏:游戏杂谈

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

image
image

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

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

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

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

完整的示例代码:

代码语言:javascript
复制
<!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 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档