玩轉3D Swiper性感秀之思路分析總結

時間 2019-11-15

標籤 3d swiper 思路分析總結简体版

原文原文鏈接

前言

繼一次的3D魔方以後，此次帶你一塊兒玩轉性感美女秀，正常套路，請先一堵爲快，有興趣繼續，沒興趣也能夠看看美女養眼哦🤪！想直接在線預覽 👈javascript

本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享，公衆號：honeyBadger8 — 玩轉3D Swiper性感秀之思路分析總結

回顧：

看過上次的3D魔方的同窗對於本次的分析會有必定的幫助,固然若是大佬您自己就對css3就已經玩的很666了，那麼對於下文的分解就請扮演老師的角色吧，小弟若有不足之處，歡迎斧正。css

解析：

建立列DIV ：

從上圖中咱們能看出，每次旋轉的動畫是由多列小卡片組成的；
每列根據它的下標，對背景進行位移，作到拼接的效果，總體看起來就成了一張圖
一塊兒來看一下真像是啥樣的：

colNode(){
    //生成列的節點
    for (var i=0;i<this.colLen;i++){
        let iDivCol = document.createElement('div'); //列
        iDivCol.className = "div-col";
        iDivCol.style.width = this.colW+'px';
        iDivCol.style.height = this.cubeH+'px';
        iDivCol.style.zIndex = (i>this.colLen/2?this.colLen-i:i);
        this.swiperEle.appendChild(iDivCol);
    }
}

複製代碼

立體感的構成：

旋轉的立體感是如何構成的呢？
原理其實很簡單，能夠理解成每列都是一個立體魔方，它們都是相互獨立的，
每列 backgroundPosition：index*xcolW,進行一個位移，
簡單來講，即每列內部都有6個面組成，每一個面都以父級爲目標進行 position、transform等設置，
一張圖，讓你看懂全世界：—— 圖五爲完成輸出

//——[正、上、左、右]
for(var i = 0;i<4;i++){
    let dividingLine = i<2;
    let span = document.createElement('span');
    span.className = `${dividingLine?'bg-img':'pure-color'} i${i}`;
    span.style.width = `${dividingLine? this.colW:this.cubeH}px`;
    span.style.height = this.cubeH+'px';
    if(dividingLine){
        span.style.backgroundPosition = `-${index*this.colW}px 0`;
    };
    iDivCol.appendChild(span);
};
複製代碼

單列的佈局結構：

colNode方法中的 zIndex，須要注意一下，層級的調整，能夠覆蓋立體透視形成的影響，
單列的html佈局及重點樣式，

/*四個面的樣式*/
 ...省略N行
.div-col span.i1{
    /*top*/
    transform-origin:top;
    transform:translateZ(-360px) rotateX(90deg);
}
.div-col span.i2{
    /*left*/
    transform-origin: left;
    transform: rotateY(90deg);
}
.div-col span.i3{
    /*right*/
    transform-origin:left;
    transform:translateX(25px) rotateY(90deg);
}


複製代碼

切換：

佈局完成後，咱們只須要操控系列[div-col]來進行旋轉便可，
下圖爲 transform-origin:50% 50% -180px，即設置旋轉的中心點：

鼠標通過都實現了，上下頁切換還遠嗎？
以前建立結構的時候，咱們已知div的列數，
爲了更好的裝B，咱們在旋轉的時候，給每列都要添加必定延時setTimeout，得以達到緩衝的視差，
而後requestAnimationFrame就該它出場了，setInterval已經成爲過去式，
同時旋轉前，還要設置下一頁，要顯示的圖片，
固然記得旋轉完成，後要重置角度哦。

...省略N行
swiperAnimate(){
    const _requestAnimationFrame_ = window.requestAnimationFrame||window.WebkitRequestAnimationFrame;
    const iDivCol = this.swiperEle.querySelectorAll(".div-col");
    for(var i=0;i<iDivCol.length;i++){
        //讓動畫更逼真，給個過渡，固然也能夠調整，requestAnimationFrame每次遞增的值，
        iDivCol[i].style.WebkitTransition=`.8s -webkit-transform ease`;
        iDivCol[i].style.WebkitTransformOrigin=iDivCol[i].style.transformOrigin = "50% 50% -180px";
        this.animateMove(iDivCol[i],i,_requestAnimationFrame_);
    }
}
animateMove(Col,index,animationFrame){

    let ColNum =0;
    let spanSurface =  Col.querySelectorAll("span");
    //即將旋轉到的面，展現的圖片
    spanSurface[1].style.backgroundImage="url(./2.jpg)";
    setTimeout(()=>{
        //每列進行一個延時，以達到緩衝效果
        this.rotate(Col,0,spanSurface,animationFrame);

    },index*this.delayMilli);
}
...省略N行
複製代碼

上下翻頁：

上面基本已實現了旋轉的效果，再加一些修飾，
上下點擊切換的功能，注意的地方在於，防止重複點擊，當前旋轉中時不能點：

pageDown(){
    if(this.status){
        console.log("下翻，不能點擊")
        return ;
    };
    this.status = 1;
    this.pageNum = this.pageNum>=this.imageList.length ? 1 :++this.pageNum;
    this.swiperAnimate();
}
複製代碼

預加載：

因輪播圖圖片較多，且此示例的圖片每次只加載了兩張，故要對圖片進行一個預加載，
以及圖片加載出錯後的過濾，避免影響後續效果的呈現：

preloadingImage(){
    this.imageList.map((k,v)=>{
        let imgNode = new Image();
        imgNode.onerror=err=>{
            this.imageList.splice(v,1);
        }
        imgNode.src = k;
    });
}

複製代碼

總結：

一個效果實現的方式有不少種，好比咱們能夠設置6個面，每設置一次，都是展現一張圖，這樣就不用每次旋轉完後又去重置圖片、角度等問題，包括requestAnimationFrame動畫切換的過渡過程，也應該有更好的方式，新手上路中，歡迎各位大佬指點。以上就是今天爲您帶來的分享，你GET到了嗎？若是以爲不錯，記得給個贊哦，想第一時間得到最新分享，歡迎掃碼關注個人我的公衆號：honeyBadger8，👇！html

本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享，公衆號：honeyBadger8,@IT·平頭哥聯盟主要分享前端、測試等領域的積累，文章來源於(本身/羣友)工做中積累的經驗、填過的坑，但願能盡綿薄之力助其餘同窗少走一些彎路,梅斌的專欄,首席填坑官∙蘇南的專欄 — 用心分享，作有溫度的攻城獅！公衆號：honeyBadger8

做者：蘇南 - 首席填坑官前端

來源：@IT·平頭哥聯盟java

連接：blog.csdn.net/weixin_4325…css3

交流：91259409五、公衆號：honeyBadger8git

本文原創，著做權歸做者全部。商業轉載請聯繫@IT·平頭哥聯盟得到受權，非商業轉載請註明原連接及出處。github