仿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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

CSS+JS实现tab标签切换

循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

6583
来自专栏Flutter入门到实战

Android适配全面总结(一)----屏幕适配

版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad...

2044
来自专栏向治洪

React Native之常用第三方库

前言 React Native出来一年多了,受到各大开发人员的喜爱,但是由于只是专注于View层的开发,因此在很多深层次上还需要结合原生app做一定的兼容,还有...

4299
来自专栏Micro_awake web

谈谈html中一些比较"偏门"的知识(map&area;iframe;label)

说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象。也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素。 常见的有:<br>...

2476
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(六)动画animation,Web字体

好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。

931
来自专栏IMWeb前端团队

css经典布局之左侧固定大小右侧自动适应

最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会...

2900
来自专栏CaiRui

Html再学

1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字、图片、视频等。 2.  CSS样式是展现。就像网页的外衣。比如,标题...

2856
来自专栏九彩拼盘的叨叨叨

我们到底需不需要 jQuery

曾经,在那个 IE6 还是主流浏览器的时代,为了实现稍微复杂一点的功能,也需要很多代码。如果要做到兼容主流浏览器,更需大费周章。当 jQuery 出现后,使用 ...

741
来自专栏進无尽的文章

绘图-视图遮罩MaskView的使用

可以这样理解,是将maskView每个point的alpha赋值给View的重叠部分相对应的point,这样view的重叠每个point都有个alpha值了,v...

1482
来自专栏24K纯开源

Qt Style Sheet实践(一):按钮及关联菜单

导读      正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离。...

4315

扫码关注云+社区

领取腾讯云代金券