老司机双十一厚礼之玩转 3D Swiper 性感秀之思路分析总结

Posted 2021-01-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了老司机双十一厚礼之玩转 3D Swiper 性感秀之思路分析总结相关的知识，希望对你有一定的参考价值。

技术分享图片

前言

　　继一次的3D魔方之后，这次带你一起玩转性感美女秀，正常套路，请先一堵为快，有兴趣继续，没兴趣也可以看看美女养眼哦！想直接在线预览

技术分享图片

双十一快乐，这里是@IT·平头哥联盟，我是首席填坑官?苏南，用心分享做有温度的攻城狮。
公众号：honeyBadger8，群：912594095

回顾：

　　看过上次的3D魔方的同学对于本次的分析会有一定的帮助,当然如果大佬您本身就对css3就已经玩的很666了，那么对于下文的分解就请扮演老师的角色吧，小弟如有不足之处，欢迎斧正。

解析：

创建列DIV ：

从上图中我们能看出，每次旋转的动画是由多列小卡片组成的；
每列根据它的下标，对背景进行位移，做到拼接的效果，整体看起来就成了一张图
一起来看一下真像是啥样的：

技术分享图片


colNode(){
    //生成列的节点,首席填坑官-苏南，公众号：honeyBadger8、交流：912594095
    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布局及重点样式，

技术分享图片

 /*四个面的样式,首席填坑官-苏南，公众号：honeyBadger8、交流：912594095*/
 ...省略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，！

技术分享图片

老司机双十一厚礼之玩转 3D Swiper 性感秀之思路分析总结

前言

回顾：

解析：

创建列DIV ：

立体感的构成 ：

单列的布局结构 ：

切换 ：

上下翻页 ：

预加载 ：

总结：

更多文章：

立体感的构成：

单列的布局结构：

切换：

上下翻页：

预加载：