zyt/TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue

<template>
    <view class="grip-ring-canvas">
        <!-- 环境氛围:中心放射光晕(不形成边界,真正融入) -->
        <view class="ambient-glow" />

        <!-- 捏碎特效画布 -->
        <CrushCanvas ref="crushCanvasRef" />

        <!-- 握力环容器 -->
        <view class="ring-container" :class="{ playing: isPlaying }" @click="onButtonClick">
            <!-- 外发光(只在播放时启用) -->
            <view class="ring-aura" />

            <!-- 握力环主体 -->
            <view class="grip-ring">
                <view class="ring-outer-circle" />
                <view class="ring-highlight" />
                <view class="ring-inner-circle" />
            </view>

            <!-- 中心提示 (仅未开始时显示) -->
            <view v-if="!isPlaying" class="center-hint">
                <view class="hint-icon">
                    <view class="play-triangle" />
                </view>
                <text class="hint-text">点击开始</text>
            </view>

            <!-- BPM 显示 (播放时显示) -->
            <view v-else class="bpm-display">
                <text class="bpm-value">{{ bpm }}</text>
                <text class="bpm-label">BPM</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CrushCanvas from './crush-canvas.vue'

interface Props {
    bpm: number
    isPlaying: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
    togglePlay: []
}>()

const crushCanvasRef = ref()

const onButtonClick = () => {
    emit('togglePlay')
}

// 暴露捏碎特效触发方法
const triggerCrushEffect = (itemType: 'egg' | 'walnut' | 'can' | 'balloon') => {
    crushCanvasRef.value?.triggerCrush(itemType)
}

defineExpose({
    triggerCrushEffect
})
</script>

<style lang="scss" scoped>
/* ============================================================
 * 画布容器 - 完全融入页面,无边界
 * ============================================================ */
.grip-ring-canvas {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* 与页面背景一致,无可见边界 */
    background: #f8fafc;
}

/* 环境氛围 - 中心大放射光晕,营造空间感 */
.ambient-glow {
    position: absolute;
    width: 1400rpx;
    height: 1400rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(255, 255, 255, 1) 0%,
            rgba(241, 245, 249, 0.6) 25%,
            rgba(226, 232, 240, 0.3) 50%,
            transparent 75%);
    pointer-events: none;
}

/* ============================================================
 * 握力环容器 - 主视觉
 * ============================================================ */
.ring-container {
    position: relative;
    width: 640rpx;
    height: 640rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

/* 外发光 - 只在播放时显示(节省 GPU) */
.ring-aura {
    position: absolute;
    width: 700rpx;
    height: 700rpx;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(244, 114, 182, 0.45) 0%,
        rgba(244, 114, 182, 0.15) 35%,
        rgba(244, 114, 182, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: transform, opacity;
}

.ring-container.playing .ring-aura {
    opacity: 1;
    animation: aura-breath 2s ease-in-out infinite;
}

@keyframes aura-breath {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* ============================================================
 * 握力环主体 - 大尺寸沉浸感
 * ============================================================ */
.grip-ring {
    position: relative;
    width: 520rpx;
    height: 520rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.ring-container:active .grip-ring {
    transform: scale(0.96);
}

/* 外圈 - 粉色渐变(精致质感) */
.ring-outer-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg,
        #fda4af 0%,
        #f472b6 50%,
        #ec4899 100%);
    box-shadow:
        0 24rpx 64rpx rgba(236, 72, 153, 0.4),
        0 12rpx 32rpx rgba(244, 114, 182, 0.3),
        inset 0 -20rpx 40rpx rgba(190, 24, 93, 0.35),
        inset 0 20rpx 40rpx rgba(255, 255, 255, 0.5);
}

/* 顶部高光 - 模拟材质感 */
.ring-highlight {
    position: absolute;
    width: 420rpx;
    height: 120rpx;
    top: 40rpx;
    border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* 内圈中空 */
.ring-inner-circle {
    position: absolute;
    width: 280rpx;
    height: 280rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:
        inset 0 8rpx 20rpx rgba(190, 24, 93, 0.3),
        inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.8);
}

/* 播放时的挤压动画(只影响 transform,GPU 加速) */
.ring-container.playing .grip-ring {
    animation: squeeze-ring 1s ease-in-out infinite;
}

@keyframes squeeze-ring {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.93);
    }
}

/* ============================================================
 * 中心提示 (未开始)
 * ============================================================ */
.center-hint {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    pointer-events: none;
    animation: hint-fade-in 0.3s ease;
}

@keyframes hint-fade-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hint-icon {
    width: 108rpx;
    height: 108rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 50%;
    box-shadow:
        0 12rpx 32rpx rgba(236, 72, 153, 0.35),
        inset 0 2rpx 4rpx rgba(255, 255, 255, 0.9);
    animation: hint-bounce 2s ease-in-out infinite;
    will-change: transform;
}

.play-triangle {
    width: 0;
    height: 0;
    border-left: 36rpx solid #ec4899;
    border-top: 24rpx solid transparent;
    border-bottom: 24rpx solid transparent;
    margin-left: 10rpx;
}

@keyframes hint-bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

.hint-text {
    font-size: 28rpx;
    color: #be185d;
    font-weight: 700;
    letter-spacing: 4rpx;
    text-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.9);
}

/* ============================================================
 * BPM 显示 (播放中)
 * ============================================================ */
.bpm-display {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rpx;
    pointer-events: none;
}

.bpm-value {
    font-size: 88rpx;
    color: #be185d;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2rpx;
    text-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.9);
    font-variant-numeric: tabular-nums;
}

.bpm-label {
    font-size: 22rpx;
    color: #ec4899;
    font-weight: 700;
    letter-spacing: 6rpx;
    margin-top: 2rpx;
}
</style>