vue项目中实现3D万花筒和3D文字旋转效果-编程知识

一、万花筒

1、html部分

//万花筒html
<div class="carousel" data-gap="368"><figure><div class="carouselItem" v-for="(item,index) in exhibitionList" :key="index"><div class="itemContent" :class="`cardBg${index+1}`" @click="toExhibitionHall(item)" @mouseenter="showEnterprise(item)"><h6>{{item.name}}</h6><p :title="item.des">{{item.des}}</p></div></div></figure>
</div>

2、js部分

mounted() {this.cardRotate();
},
methods: {// 卡片旋转cardRotate(){let that = this;carousel();var xdeg = 0;this.timer = setInterval(function() {xdeg = xdeg + 0.3;$('figure').css('transform', "rotateY(" + (-xdeg) + "deg)");}, 20);function carousel(){var figure = $("figure"),items = $(".carouselItem"),n = items.length,theta = 2 * Math.PI / n,currImage = 0;setUpCarousel(n, items.width());function setUpCarousel(n, s) {let padg = window.screen.width / 1920 * $(".carousel").attr("data-gap");var apothem = s / (2 * Math.tan(Math.PI / n));figure.css('transformOrigin', '50% 50% ' + (-apothem) + 'px');items.css("padding", "20px " + padg + "px 0");for (var i = 1; i < n; i++) {items.eq(i).css({'transformOrigin': '50% 50% ' + (-apothem) + 'px','transform': 'rotateY(' + i * theta + 'rad)',});}rotateCarousel(currImage);}function rotateCarousel(index) {figure.css({"transform": "rotateX(0deg) rotateY(" + index * -theta + "rad)"});}// 暂停启动定时器$(".carousel").mouseleave(function() {that.timer = setInterval(function() {xdeg = xdeg + 0.3;$('figure').css('transform', "rotateY(" + (-xdeg) + "deg)");}, 20);})$(".carousel").mouseenter(function() {clearInterval(that.timer);})// $(".prev").click(() => {//     currImage--;//     rotateCarousel(currImage);// })// $(".next").click(() => {//     currImage++;//     rotateCarousel(currImage);// })}},
},

3、css部分

.carousel {width: 26.75rem;height: 13rem;// perspective: 700px;overflow: hidden;display: flex;flex-direction: column;align-items: center;position: absolute;bottom: 3.5rem;left:50%;transform: translateX(-50%);z-index: 4;
}
.carousel figure {margin: 0;// width: 1070px;transform-style: preserve-3d;transition: transform 0.5s;
}.carouselItem {width: 100%;height: 11.55rem;box-sizing: border-box;cursor: pointer;z-index: 1;// -webkit-box-reflect: below 20px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .5) 100%);
}.itemContent {width: 100%;height: 100%;padding: 5.8rem 1.7rem 0;box-sizing: border-box;color:#fff;h6{font-weight: bold;font-size: .65rem;line-height: .65rem;margin-bottom:.4rem;text-align: center;}p{font-size: .45rem;font-weight: 400;text-align: center;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
}
.cardBg1{background: url(~img/cardBg1.png) no-repeat center / 100% 100%;
}
.cardBg2{background: url(~img/cardBg2.png) no-repeat center / 100% 100%;
}
.cardBg3{background: url(~img/cardBg3.png) no-repeat center / 100% 100%;
}
.cardBg4{background: url(~img/cardBg4.png) no-repeat center / 100% 100%;
}
.cardBg5{background: url(~img/cardBg5.png) no-repeat center / 100% 100%;
}
.cardBg6{background: url(~img/cardBg6.png) no-repeat center / 100% 100%;
}.carouselItem:not(:first-of-type) {position: absolute;left: 0;top: 0;
}

二、文字旋转

1、html部分

<div class="textCricle1"><canvas id="canvas1" width="1310" height="1310" style="width: 100%;height: 100%;"></canvas>
</div>
<div class="textCricle2"><canvas id="canvas2" width="1550" height="1550" style="width: 100%;height: 100%;"></canvas>
</div>
<div class="textCricle3"><canvas id="canvas3" width="1790" height="1790" style="width: 100%;height: 100%;"></canvas>
</div>

2、js部分

mounted() {this.textMove();
},
methods: {// 环形文字textMove(){let canvas1 = document.getElementById('canvas1'),fill1 = 'rgba(0, 168, 255, 0.8)',stroke1 = 'rgba(0, 168, 255, 0.8)';this.canvasDraw(canvas1, fill1, stroke1)let canvas2 = document.getElementById('canvas2'),fill2 = 'rgba(0, 168, 255, 0.2)',stroke2 = 'rgba(0, 168, 255, 0.2)';this.canvasDraw(canvas2,fill2,stroke2)let canvas3 = document.getElementById('canvas3'),fill3 = 'rgba(0, 168, 255, 0.1)',stroke3 = 'rgba(0, 168, 255, 0.1)';this.canvasDraw(canvas3,fill3,stroke3)},// canvas绘制文字canvasDraw(dom,fill,stroke){let context = dom.getContext('2d'),TEXT_FILL_STYLE = fill,TEXT_STROKE_STYLE = stroke,TEXT_SIZE = 30,circle = {x: dom.width / 2,y: dom.height / 2,radius: (dom.width / 2) - 20,},startAngle = Math.PI*2+Math.PI/2,endAngle = Math.PI/60+Math.PI/2,text = '0101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101';/*** 绘制环形文字* @param{string} string 传入的文字* @param startAngle 起始角* @param endAngle 末尾角*/let drawCircularText = (string, startAngle, endAngle) => {let radius = circle.radius,angleDecrement = (startAngle - endAngle) / (string.length - 1),angle = parseFloat(startAngle),index = 0,character;context.save();context.fillStyle=TEXT_FILL_STYLE;context.strokeStyle=TEXT_STROKE_STYLE;context.font=TEXT_SIZE+'px Lucida Sans';while(index < string.length){//获取传入的字符串的每个字符character = string.charAt(index);context.save();context.beginPath();//位移到每个字符的指定位置context.translate(circle.x+Math.cos(angle)*radius,circle.y - Math.sin(angle)*radius);//旋转坐标系到每个字符应该达到到角度context.rotate(Math.PI/2-angle);context.fillText(character,0,0);context.strokeText(character,0,0);//角度递减angle -= angleDecrement;index++;context.restore();}};//Initlet init=(startAngle,endAngle)=>{context.textAlign='center';context.textBaseline='middle';drawCircularText(text,startAngle,endAngle);};init(startAngle,endAngle);}
},

3、css部分

.textCricle1{position: absolute;bottom:2rem;left:50%;width:32.75rem;height:32.75rem;transform: translate(-50%, 38%) rotateX(77deg);z-index: 1;#canvas1{animation: rotate 80s infinite linear;}
}.textCricle2{position: absolute;bottom:2rem;left:50%;width:38.75rem;height:38.75rem;transform: translate(-50%, 40%) rotateX(78deg);z-index: 1;#canvas2{animation: rotate 80s infinite linear;}
}.textCricle3{position: absolute;bottom:2rem;left:50%;width:44.75rem;height:44.75rem;transform: translate(-50%, 41%) rotateX(79deg);z-index: 1;#canvas3{animation: rotate 80s infinite linear;}
}
@keyframes rotate {0% { transform: rotate(0deg); }50% { transform: rotate(-180deg); }100% { transform: rotate(-360deg); }
}