uniapp微信小程序实现魔方旋转

zhou404

于 2024-06-28 15:23:17 发布

阅读量493

点赞数 3

文章标签： uni-app 微信小程序小程序

本文链接：https://blog.csdn.net/zhou404/article/details/140044017

版权

1.演示

2.实现思路

a.首先在容器内创建六个长宽分别为150px的正方形

b.然后通过rotate旋转和translate平移使六个平面变成一个正方体形状，我选择了translateZ(100px),视觉效果如上

c.旋转动画通过 animation: rotate 8s infinite linear;其中各个属性意思为：

animation: 这是CSS的动画属性，用于定义动画的名称、持续时间、播放方式等。
rotate: 这是动画的名称，指定为rotate，表示旋转动画。rotate是我在下方自定义的关键帧
8s: 这是动画的持续时间，表示动画会持续8秒钟。
infinite: 这是动画的迭代次数，表示动画将无限次播放。
linear: 这是动画的播放方式，表示动画将按照线性时间函数播放，即动画运动过程中速度保持恒定，不加速也不减速。

d.通过使用动态class,实现当点击抽一张的时候，变成一个完整的正方体

3.代码实现

template部分：

<template>
    <view class="container">
        <view class="cube" :class="{ 'open': isOpen }">
            <view class="side front" :class="{ 'active-front': isRotating }">
                <!-- <text style="font-size: 100rpx;color: black;">抽</text> -->
            </view>
            <view class="side back" :class="{ 'active-back': isRotating }">
                <!-- <text style="font-size: 100rpx;color: black;">一</text> -->
            </view>
            <view class="side left" :class="{ 'active-left': isRotating }">
                <!-- <text style="font-size: 100rpx;color: black;">张</text> -->
            </view>
            <view class="side right" :class="{ 'active-right': isRotating }">
                <!-- <text style="font-size: 100rpx;color: black;">就</text> -->
            </view>
            <view class="side top" :class="{ 'active-top': isRotating }">
                <!-- <text style="font-size: 100rpx;color: black;">脱</text> -->
            </view>
            <view class="side bottom" :class="{ 'active-bottom': isRotating }">
                <!-- <text style="font-size: 100rpx;color: black;">单</text> -->
            </view>
        </view>
        //演示的时候下面代码可以注释掉
        <tn-popup v-model="show" :closeBtn="true" :closeIconSize="Number(50)" closeIconColor="#222222"
            closeBtnIcon="close-circle" mode="center" width="600rpx" height="600rpx" :borderRadius="Number(40)"
            :maskCloseable="false" @close="closePopup">
            <view class="xiaoxi">
                <text style="color: black;font-size: 30rpx;">{{userInfo.nickname}}</text>
                <view class="paper-desc">
                    <pre class="paper-content">{{ paperList.desc }}</pre>
                </view>
                <button @click="toChat(userInfo._id)" class="btn btn-grad5">去回复</button>
            </view>
        </tn-popup>
        <button @click="startRotate" class="btn btn-grad2">抽一张</button>
    </view>
</template>

style部分：

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .cube {
        width: 150px;
        height: 150px;
        position: relative;
        transform-style: preserve-3d;
        animation: rotate 8s infinite linear;
        transition: transform 1s;
    }

    .open {
        animation: accelerate 2s;
    }

    .side {
        position: absolute;
        width: 150px;
        height: 150px;
        border-radius: 20px;
        background-size: cover; /* 调整背景图片大小 */
        background-repeat: no-repeat; /* 禁止背景图片重复 */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .front {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/mansmile.webp');
        transform: rotateY(0deg) translateZ(100px);
    }
    .active-front {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/mansmile.webp');
        transform: rotateY(0deg) translateZ(75px);
    }

    .back {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/woman01.jpeg');
        transform: rotateY(180deg) translateZ(100px);
    }
    .active-back {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/woman01.jpeg');
        transform: rotateY(180deg) translateZ(75px);
    }

    .left {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/mancold.webp');
        transform: rotateY(-90deg) translateZ(100px);
    }
    .active-left {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/mancold.webp');
        transform: rotateY(-90deg) translateZ(75px);
    }
    
    .right {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/woman02.jpeg');
        transform: rotateY(90deg) translateZ(100px);
    }
    .active-right {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/woman02.jpeg');
        transform: rotateY(90deg) translateZ(75px);
    }

    .top {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/manhair.webp');
        transform: rotateX(90deg) translateZ(100px);
    }
    .active-top {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/manhair.webp');
        transform: rotateX(90deg) translateZ(75px);
    }

    .bottom {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/woman03.jpeg');
        transform: rotateX(-90deg) translateZ(100px);
    }
    .active-bottom {
        background-image: url('https://mp-a2516907-ca01-4101-b80f-adefa720665d.cdn.bspapp.com/lovebox/woman03.jpeg');
        transform: rotateX(-90deg) translateZ(75px);
    }

    @keyframes rotate {
        0% {
            transform: rotateY(0deg) rotateX(0deg);
        }
        50% {
            transform: rotateY(360deg) rotateX(180deg);
        }
        100% {
            transform: rotateY(720deg) rotateX(360deg);
        }
    }

    @keyframes accelerate {
        0% {
            transform: rotateY(0deg) rotateX(0deg);
        }
        100% {
            transform: rotateY(1440deg) rotateX(720deg);
        }
    }

    .xiaoxi {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: #f9f9f9;
    }

    .paper-desc {
        width: 560rpx;
        margin: 20rpx;
        height: 350rpx;
        padding: 10px;
        border-radius: 5px;
        resize: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: Arial, sans-serif;
        border: 2px solid #79CBCA;
        outline: none;
        background-color: transparent;
    }

    .paper-content {
        white-space: pre-wrap;
        font-family: '华文新楷';
        font-size: 30rpx;
        color: #ff6e7f;
    }

    .btn-grad2 {
        background-image: linear-gradient(to right, #ff6e7f 0%, #bfe9ff 51%, #ff6e7f 100%);
        width: 50vw;
        height: calc(15vw);
        position: fixed;
        bottom: 20vh;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        box-shadow: 0 0 20px #eee;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-grad2:hover {
        background-position: right center;
        color: #fff;
        text-decoration: none;
    }

    .btn-grad5 {
        background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
        width: 50vw;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        box-shadow: 0 0 20px #eee;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-grad5:hover {
        background-position: right center;
        color: #fff;
        text-decoration: none;
    }
</style>