实现带减速效果的幸运大转盘旋转功能

我正在开发幸运大转盘（轮盘赌）功能，目前其他部分运行正常，仅旋转环节需要实现接近结束时的减速效果。请问需要在以下脚本的何处修改或添加代码？

let index = Math.floor(Math.random() * this.max)
let rotations = 360 * ((Math.ceil(Math.random() * 10)) + 20) + ((index - 1) / this.max * 360) + (Math.floor(Math.random() * (360/this.max)))
// let rotations = ((index - 1) / this.max * 360)
let seconds = 2 + Math.ceil(Math.random() * 2)
console.log(rotations)
console.log(index)
console.log(this.prizes[index])
const randomAnswer = this.prizes[index]

实现思路与修改方案 #

你的现有代码仅计算了转盘最终需要旋转的总角度和总时长，但没有处理速度变化逻辑——默认是匀速旋转，所以要实现接近结束时的减速，需要结合缓动函数和逐帧动画API（requestAnimationFrame）来控制旋转过程。

具体修改步骤：

1. 保留原有目标角度和中奖结果的计算逻辑，将总时长变量命名更清晰；
2. 添加一个缓动函数（比如easeOutQuad），用来将线性的时间进度转换成先快后慢的非线性进度；
3. 使用requestAnimationFrame逐帧计算当前应该旋转的角度，应用缓动后的进度值，实现减速效果。

修改后的完整代码：

// 保留原有核心计算逻辑
let index = Math.floor(Math.random() * this.max)
// 计算最终旋转总角度（多圈后停在目标奖品位置）
let rotations = 360 * ((Math.ceil(Math.random() * 10)) + 20) + ((index - 1) / this.max * 360) + (Math.floor(Math.random() * (360/this.max)))
const totalDuration = 2 + Math.ceil(Math.random() * 2) // 总动画时长（秒）
const randomAnswer = this.prizes[index]

// 缓动函数：easeOutQuad，实现先快后慢的减速效果
function easeOutQuad(t) {
  return t * (2 - t)
}

let startTime = null
// 逐帧动画函数
function updateRotation(timestamp) {
  if (!startTime) startTime = timestamp
  // 计算已流逝时间占总时长的比例（范围0~1）
  const progress = Math.min((timestamp - startTime) / (totalDuration * 1000), 1)
  // 应用缓动函数，得到非线性的进度值
  const easedProgress = easeOutQuad(progress)
  // 计算当前需要旋转的角度
  const currentRotation = rotations * easedProgress

  // 替换成你实际控制转盘旋转的代码，比如操作DOM元素的transform属性
  // 示例：document.getElementById('wheel').style.transform = `rotate(${currentRotation}deg)`

  // 未完成动画则继续请求下一帧
  if (progress < 1) {
    requestAnimationFrame(updateRotation)
  } else {
    // 动画结束后的逻辑，比如展示中奖结果
    console.log('中奖奖品：', randomAnswer)
  }
}

// 启动转盘动画
requestAnimationFrame(updateRotation)

关键说明：

• 缓动函数：easeOutQuad是常用的减速缓动函数，它的数学逻辑是让进度值在接近1时增长速度逐渐放缓，对应转盘旋转速度从快到慢自然减速；
• 逐帧动画：requestAnimationFrame会根据浏览器的刷新频率自动调用动画函数，保证动画流畅性，同时避免卡顿；
• 你需要将代码中的DOM操作部分替换成项目中实际控制转盘旋转的代码（比如修改转盘容器的CSS transform属性）。

内容的提问来源于stack exchange，提问作者HJH