全屏網格摺疊動畫插件

本文轉載於:猿2048網站全屏網格摺疊動畫插件

前言

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、一、2），右邊有2個網格（九、10）隱藏了。

ps:這裏的序號對應每一個網格排列的序號（從 0 開始計算）

下面是分解動畫的過程：

從這裏能夠觀察出，每排的網格都會逐漸向中心折疊，這裏的中心元素分別對應序號5（第6個網格）、16（第17個網格）、27（第28個網格）。當第一排和第三排網格都摺疊完畢時，第一排網格和第三排網格（五、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/ 本文能夠轉載，但務必註明原做者和原出處。