321 lines
7.7 KiB
Vue
321 lines
7.7 KiB
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">{{ hintText || '点击开始' }}</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
|
|
hintText?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
hintText: '点击开始',
|
|
})
|
|
|
|
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: linear-gradient(180deg, #f0fdfa 0%, #f8fafc 55%, #f1f5f9 100%);
|
|
}
|
|
|
|
/* 环境氛围 - 中心放射光晕 */
|
|
.ambient-glow {
|
|
position: absolute;
|
|
width: 1200rpx;
|
|
height: 1200rpx;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle,
|
|
rgba(204, 251, 241, 0.9) 0%,
|
|
rgba(240, 253, 250, 0.5) 30%,
|
|
rgba(241, 245, 249, 0.2) 55%,
|
|
transparent 72%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ============================================================
|
|
* 握力环容器 - 主视觉
|
|
* ============================================================ */
|
|
.ring-container {
|
|
position: relative;
|
|
width: 560rpx;
|
|
height: 560rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 外发光 - 只在播放时显示(节省 GPU) */
|
|
.ring-aura {
|
|
position: absolute;
|
|
width: 620rpx;
|
|
height: 620rpx;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle,
|
|
rgba(20, 184, 166, 0.4) 0%,
|
|
rgba(45, 212, 191, 0.15) 35%,
|
|
rgba(20, 184, 166, 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: 460rpx;
|
|
height: 460rpx;
|
|
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,
|
|
#5eead4 0%,
|
|
#2dd4bf 45%,
|
|
#14b8a6 100%);
|
|
box-shadow:
|
|
0 20rpx 56rpx rgba(20, 184, 166, 0.35),
|
|
0 10rpx 28rpx rgba(45, 212, 191, 0.25),
|
|
inset 0 -18rpx 36rpx rgba(15, 118, 110, 0.3),
|
|
inset 0 18rpx 36rpx rgba(255, 255, 255, 0.45);
|
|
}
|
|
|
|
/* 顶部高光 - 模拟材质感 */
|
|
.ring-highlight {
|
|
position: absolute;
|
|
width: 360rpx;
|
|
height: 100rpx;
|
|
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: 250rpx;
|
|
height: 250rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
|
|
box-shadow:
|
|
inset 0 8rpx 20rpx rgba(15, 118, 110, 0.25),
|
|
inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
/* 播放时的挤压动画(只影响 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: 96rpx;
|
|
height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 12rpx 32rpx rgba(20, 184, 166, 0.28),
|
|
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: 32rpx solid #0f766e;
|
|
border-top: 22rpx solid transparent;
|
|
border-bottom: 22rpx solid transparent;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
@keyframes hint-bounce {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.06);
|
|
}
|
|
}
|
|
|
|
.hint-text {
|
|
font-size: 26rpx;
|
|
color: #0f766e;
|
|
font-weight: 700;
|
|
letter-spacing: 3rpx;
|
|
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: 80rpx;
|
|
color: #0f766e;
|
|
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: #14b8a6;
|
|
font-weight: 700;
|
|
letter-spacing: 6rpx;
|
|
margin-top: 2rpx;
|
|
}
|
|
</style>
|