vue项目中实现3D万花筒和3D文字旋转效果

一、万花筒

 

        1、html部分 

//万花筒html

    

        

            

                
{{item.name}}
                
{{item.des}}
            
        
    

        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部分  

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


        //Init
        let 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); }
}