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); } }
立体魔方
,它们都是相互独立的,//——[正、上、左、右]
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);
};
zIndex
/四个面的样式/ ...省略 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
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 到了吗?如果觉得不错,记得给个赞哦