前言 Duang，Duang，Duang，博主又來分享插件了，這次是一個炫酷的網格摺疊動畫效果，其原理模擬紙板摺疊過程的動畫，頁面使用了大量CSS3屬性，具體效果請看演示頁面（建議使用新版谷歌、火狐瀏覽器觀看，對於ie9以下不支持CSS3屬性的瀏覽器不相容）。 博主個人建議：這個效果可以用於網站引導 ...
前言
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/
本文可以轉載，但務必註明原作者和原出處。
