diff --git a/src/views/wealth/goldenWheel.vue b/src/views/wealth/goldenWheel.vue index 1c738e8..e9ad2fb 100644 --- a/src/views/wealth/goldenWheel.vue +++ b/src/views/wealth/goldenWheel.vue @@ -258,11 +258,12 @@ export default { showNoTimesModal: false, showRuleModal: false, isFirstVisit: true, - currentRotation: -23.5, // 初始旋转-22.5度 + currentRotation: -22.5, // 初始旋转-22.5度 noTimesTimer: null, prizeMessage: '', prizeAmount: '', textWidth: 0, + targetRotation: 0, // 新增:目标旋转角度, historyRecordListVisible: false, nowMonths: [], @@ -479,6 +480,37 @@ async loadHistoryRecord() { } }, + // 计算随机停止位置 + calculateRandomStop() { + // 转盘有8个区域,每个区域45度 + const sectorDegrees = 45; + + // 随机选择一个区域 (0-7) + const randomSector = Math.floor(Math.random() * 8); + + // 计算目标角度:从初始位置(-22.5度)到选中区域的中心 + // 每个区域中心的角度 = 区域索引 * 45度 - 22.5度 + const targetAngle = randomSector * sectorDegrees - 22.5; + + // 计算需要旋转的总角度(确保多转几圈) + // 从当前位置旋转到目标位置,加上多转的圈数(3-5圈) + const extraRotations = 5 + Math.floor(Math.random() * 3); // 3-5圈 + const extraDegrees = extraRotations * 360; + + // 计算最终旋转角度 + // 从当前角度旋转到目标角度,加上额外的圈数 + // 注意:需要确保旋转方向正确 + let rotationNeeded = targetAngle - this.currentRotation; + + // 如果旋转角度为负,加上360度使其为正 + if (rotationNeeded < 0) { + rotationNeeded += 360; + } + + // 加上额外的圈数 + return this.currentRotation + rotationNeeded + extraDegrees; + }, + // 处理转动 async handleSpin() { if (this.showRuleModal || this.isFirstVisit || this.isSpinning) return; @@ -501,9 +533,14 @@ async loadHistoryRecord() { // 有剩余次数,开始抽奖 this.isSpinning = true; - // 开始旋转动画(从当前-22.5度位置开始旋转) - const newRotation = this.currentRotation + 1440; - this.currentRotation = newRotation; + // 计算随机停止位置 + this.targetRotation = this.calculateRandomStop(); + + // 设置CSS变量,用于动画 + document.documentElement.style.setProperty('--target-rotation', `${this.targetRotation}deg`); + + // 开始旋转动画 + this.currentRotation = this.targetRotation; // 调用抽奖API获取奖品信息 const success = await this.fetchPrizeInfo(); @@ -708,7 +745,7 @@ async loadHistoryRecord() { } .wheel-img.spinning { - animation: optimal-spin 3s cubic-bezier(0.17, 0.67, 0.21, 0.98) forwards; + animation: optimal-spin 3s cubic-bezier(0.47, 0.57, 0.45, 0.15) forwards; backface-visibility: hidden; transform: translateZ(0); } @@ -717,8 +754,14 @@ async loadHistoryRecord() { 0% { transform: rotate(-22.5deg); /* 从-22.5度开始旋转 */ } + 20% { + transform: rotate(calc(-22.5deg + (var(--target-rotation, 1440deg) + 22.5deg) * 0.2)); /* 加速阶段 */ + } + 80% { + transform: rotate(calc(-22.5deg + (var(--target-rotation, 1440deg) + 22.5deg) * 0.8)); /* 减速阶段 */ + } 100% { - transform: rotate(1417.5deg); /* 1440 - 22.5 = 1417.5度 */ + transform: rotate(var(--target-rotation, 1417.5deg)); /* 使用CSS变量控制最终旋转角度 */ } }