玩转3D Swiper性感秀之思绪剖析总结

2019年8月20日 200次阅读来源: 苏南

《玩转3D Swiper性感秀之思绪剖析总结》

媒介

　　继一次的3D魔方以后，此次带你一同玩转性感玉人秀，一般套路，请先一堵为快，有兴致继承，没兴致也能够看看玉人养眼哦🤪！想直接在线预览 👈

《玩转3D Swiper性感秀之思绪剖析总结》

列位大佬晨安，这里是
@IT·平头哥同盟，我是
首席填坑官∙苏南，专心分享做有温度的攻城狮。
民众号：
honeyBadger8，群：912594095

回忆：

　　看过上次的3D魔方的同砚关于本次的剖析会有肯定的协助,固然假如大佬您自身就对css3就已玩的很666了，那末关于下文的剖析就请饰演先生的角色吧，小弟若有不足之处，迎接指正。

剖析：

建立列DIV ：

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

《玩转3D Swiper性感秀之思绪剖析总结》


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等设置，
一张图，让你看懂全球：—— 图五为完成输出

《玩转3D Swiper性感秀之思绪剖析总结》

//——[正、上、左、右]
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规划及重点款式，

《玩转3D Swiper性感秀之思绪剖析总结》

 /*四个面的款式*/
 ...省略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);
}

《玩转3D Swiper性感秀之思绪剖析总结》

切换：

规划完成后，我们只须要操控系列[div-col]来举行扭转即可，
下图为 transform-origin:50% 50% -180px，即设置扭转的中心点：

《玩转3D Swiper性感秀之思绪剖析总结》

鼠标经由都完成了，高低页切换还远吗？
之前建立构造的时刻，我们已知div的列数，
为了更好的装B，我们在扭转的时刻，给每列都要增加肯定延时setTimeout，得以到达缓冲的视差，
然后requestAnimationFrame就该它进场了，setInterval已成为过去式，
同时扭转前，还要设置下一页，要显现的图片，
固然记得扭转完成，后要重置角度哦。

《玩转3D Swiper性感秀之思绪剖析总结》


...省略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();
}

《玩转3D Swiper性感秀之思绪剖析总结》

预加载：

因轮播图图片较多，且此示例的图片每次只加载了两张，故要对图片举行一个预加载，
以及图片加载失足后的过滤，防止影响后续结果的显现：

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

《玩转3D Swiper性感秀之思绪剖析总结》

总结：

　　一个结果完成的体式格局有很多种，比方我们能够设置6个面，每设置一次，都是展现一张图，如许就不必每次扭转完后又去重置图片、角度等题目，包含requestAnimationFrame动画切换的过渡历程，也应当有更好的体式格局，新手上路中，迎接列位大佬指导。以上就是本日为您带来的分享，你GET到了吗？假如以为不错，记得给个赞哦，想第一时候取得最新分享，迎接扫码关注我的个人民众号：honeyBadger8，👇！

《玩转3D Swiper性感秀之思绪剖析总结》

算法网

玩转3D Swiper性感秀之思绪剖析总结

媒介

回忆：

剖析：

建立列DIV ：

平面感的组成：

单列的规划构造：

切换：

高低翻页：

预加载：

总结：

更多文章：

媒介

回忆：

剖析：

建立列DIV ：

平面感的组成 ：

单列的规划构造 ：

切换 ：

高低翻页 ：

预加载 ：

总结：

更多文章：

平面感的组成：

单列的规划构造：

切换：

高低翻页：

预加载：