时间戳

首页 > 技术文章 > 全屏网格折叠动画插件

全屏网格折叠动画插件

wwhhq 2018-01-02 22:34 原文

前言

Duang，Duang，Duang，博主又来分享插件了，这次是一个炫酷的网格折叠动画效果，其原理模拟纸板折叠过程的动画，页面使用了大量CSS3属性，具体效果请看演示页面（建议使用新版谷歌、火狐浏览器观看，对于ie9以下不支持CSS3属性的浏览器不兼容）。

博主个人建议：这个效果可以用于网站引导用户进行操作，或者在页面资源加载较多时作为信息展示页面使用。

线上演示地址：https://yangyunhe369.github.io/jQuery-Flod-Grid/

github地址：https://github.com/yangyunhe369/jQuery-Flod-Grid
ps：github地址有代码演示，以及插件源码可供参考，线上演示地址可供预览。

这里写图片描述

插件逻辑

分析这个插件逻辑之前，先说一下实现动画效果的CSS3属性：transform-origin。这个属性主要用于设置旋转元素的基点位置，就是用于改变网格翻转时基点，因为默认网格翻转是以网格中心点为基点进行翻转，这样的动画效果不符合我们预期。下面这张图大概讲解了一下transform-origin属性配合rotate属性实现网格翻转动画的原理。
这里写图片描述

在这张图里，你会看到每个网格对应一个数字，这是方便理解整体网格区域与窗口显示区域的关系。整体网格容器是由33个网格组成，一共分为3排，每排11个。在我们的可视区域内，如果不算上屏幕两边的半个网格区域，一共有6个网格，所有还有5个网格（包括未显示完整的网格）未显示。可以根据序号得出左边有3个网格（0、1、2），右边有2个网格（9、10）隐藏了。

ps:这里的序号对应每个网格排列的序号（从 0 开始计算）

下面是分解动画的过程：
这里写图片描述
这里写图片描述
这里写图片描述

从这里可以观察出，每排的网格都会逐渐向中心折叠，这里的中心元素分别对应序号5（第6个网格）、16（第17个网格）、27（第28个网格）。当第一排和第三排网格都折叠完毕时，第一排网格和第三排网格（5、27）朝向网格16折叠，最后网格16的原点基于中心的进行折叠。这就是所有网格动画的一个完整的执行过程。

源码解析

下面展示一下源码：

//定义基础变量，以及插件api
var _ops = $.extend({
    shadeTime: 1000, //遮罩层遮挡网格时长
    flodTime: 1000, //初始化页面执行网格折叠动画的延迟时长
    showBtnTime: 4500, //折叠动画开始至显示按钮的延迟时长
    loading_zzc: 'loading_zzc', //遮罩层的class
    loading_btns: 'loading_btns', //网格动画控制按钮的class
    btn_logo: 'btn_logo', //网格动画控制按钮子元素的class
    preloader: 'preloader', //网格容器的class
    square_box: 'square_box', //网格容器子元素的class
    square: 'square' //网格的class
}, options);
var $this = $(this),
    _shadeTime = _ops.shadeTime, //遮罩层遮挡网格时长
    _flodTime = _ops.flodTime, //初始化页面执行网格折叠动画的延迟时长
    _showBtnTime = _ops.showBtnTime, //折叠动画开始至显示按钮的延迟时长
    _loading_zzc = _ops.loading_zzc, //遮罩层的class
    _loading_btns = _ops.loading_btns, //网格动画控制按钮的class
    _btn_logo = _ops.btn_logo, //网格动画控制按钮子元素的class
    _preloader = _ops.preloader, //网格容器的class
    _square_box = _ops.square_box, //网格容器子元素的class
    _square = _ops.square; //网格的class

以下是关于网格折叠动画的代码：

var p = 'perspective(600px)'; //定义 3D 元素距视图的距离
for(var i=0;i<5;i++){
  $('.'+_square).eq(i).css({'transform':p+' rotateY(-90deg)','transition-delay':(i+1)*0.3+'s'});
}
for(var j=11;j>5;j--){
  $('.'+_square).eq(j).css({'transform':p+' rotateY(90deg)','transition-delay':(11-j)*0.3+'s'});
}
for(var k=12;k<16;k++){
  $('.'+_square).eq(k).css({'transform':p+' rotateY(-90deg)','transition-delay':(k-9)*0.3+'s'});
}
for(var m=22;m>16;m--){
  $('.'+_square).eq(m).css({'transform':p+' rotateY(90deg)','transition-delay':(23-m)*0.3+'s'});
}
for(var s=23;s<27;s++){
  $('.'+_square).eq(s).css({'transform':p+' rotateY(-90deg)','transition-delay':(s-19)*0.3+'s'});
}
for(var g=33;g>27;g--){
  $('.'+_square).eq(g).css({'transform':p+' rotateY(90deg)','transition-delay':(35-g)*0.3+'s'});
}
$('.'+_square).eq(5).css({'transform':p+' rotateX(90deg)','transition-delay':'2.4s'});
$('.'+_square).eq(27).css({'transform':p+' rotateX(-90deg)','transition-delay':'2.7s'});
$('.'+_square).eq(16).css({'transform':p+' rotateX(90deg)','transition-delay':'3.2s'});

以下是关于网格展开动画的代码：

var p = 'perspective(600px)'; //定义 3D 元素距视图的距离
for(var i=4;i>-1;i--){
  $('.'+_square).eq(i).css({'transform':p+' rotateY(0deg)','transition-delay':(9-i)*0.3+'s'});
}
for(var j=6;j<12;j++){
  $('.'+_square).eq(j).css({'transform':p+' rotateY(0deg)','transition-delay':(j-1)*0.3+'s'});
}
for(var k=15;k>11;k--){
  $('.'+_square).eq(k).css({'transform':p+' rotateY(0deg)','transition-delay':(19-k)*0.3+'s'});
}
for(var m=17;m<23;m++){
  $('.'+_square).eq(m).css({'transform':p+' rotateY(0deg)','transition-delay':(m-13)*0.3+'s'});
}
for(var s=26;s>22;s--){
  $('.'+_square).eq(s).css({'transform':p+' rotateY(0deg)','transition-delay':(29-s)*0.3+'s'});
}
for(var g=28;g<34;g++){
  $('.'+_square).eq(g).css({'transform':p+' rotateY(0deg)','transition-delay':(g-25)*0.3+'s'});
}
$('.'+_square).eq(5).css({'transform':p+' rotateX(0deg)','transition-delay':'0.6s'});
$('.'+_square).eq(27).css({'transform':p+' rotateX(0deg)','transition-delay':'0.3s'});
$('.'+_square).eq(16).css({'transform':p+' rotateX(0deg)','transition-delay':'0s'});

本插件的完整源码，可以访问github地址:https://github.com/yangyunhe369/jQuery-Flod-Grid。

作者： 弦云孤赫 原文链接： http://www.yangyunhe.me/2017/jquery-flodGrid/
本文可以转载，但务必注明原作者和原出处。

推荐阅读