仿bilibili转盘抽奖时，如何实现指针动画的平滑减速效果？

Question

在仿bilibili转盘抽奖中，如何实现指针动画的平滑减速效果？常见的技术问题是：如何通过 easing 函数控制动画速度变化，使减速过程自然流畅？使用 CSS 动画或 JavaScript 时，线性运动容易显得生硬，而借助如 `easeOutCubic` 等缓动函数，可以模拟真实物理惯性。但实际开发中，可能会遇到动画帧率不稳定、减速曲线不平滑或结束位置不精准等问题。解决方法是结合 `requestAnimationFrame` 和时间戳精确计算每一帧的角度变化，并通过调整最终目标角度确保指针准确停在指定奖项上。此外，还需注意不同设备性能对动画的影响，优化代码以提升兼容性和视觉体验。

Answer 1

1. 初步理解：线性动画的局限性

在仿bilibili转盘抽奖中，实现指针动画的平滑减速效果是一个关键环节。如果仅使用 CSS 动画或简单的 JavaScript 动画，通常会采用线性运动（linear easing）。然而，这种动画模式会让减速过程显得生硬且不自然。

例如，CSS 的 transition 或 animation 属性默认支持的 easing 函数如 linear、ease 等，虽然简单易用，但无法满足复杂需求。我们需要更精细的速度控制，以模拟真实的物理惯性。

2. 深入分析：缓动函数的应用

为了使减速过程更加流畅，可以引入缓动函数（easing function），如 easeOutCubic。这类函数通过数学公式定义了速度随时间的变化规律，从而让动画从快速到缓慢的过程更加自然。

以下是 easeOutCubic 的公式：

// t: 当前时间，b: 起始值，c: 总变化量，d: 持续时间
function easeOutCubic(t, b, c, d) {
    return c * ((t = t / d - 1) * t * t + 1) + b;
}

这个函数的核心在于非线性的速度变化，使得动画在接近结束时逐渐减慢。

3. 实现细节：结合 requestAnimationFrame 和时间戳

在实际开发中，仅依赖缓动函数还不够，因为浏览器帧率可能不稳定，导致动画卡顿或结束位置不精准。此时，我们可以使用 requestAnimationFrame 和时间戳来精确控制每一帧的角度变化。

• requestAnimationFrame 提供了高效的动画渲染机制，确保动画与显示器刷新率同步。
• 通过记录动画开始的时间戳（performance.now()），我们可以计算出每一帧所需的角度增量。

以下是一个基于 requestAnimationFrame 的示例代码：

let startAngle = 0;
let targetAngle = 360; // 最终目标角度
let duration = 2000; // 动画持续时间（毫秒）
let startTime = null;

function animate(currentTime) {
    if (!startTime) startTime = currentTime;
    let elapsed = currentTime - startTime;
    let progress = Math.min(elapsed / duration, 1); // 计算进度
    let angle = easeOutCubic(progress, startAngle, targetAngle - startAngle, 1);

    // 更新指针角度
    document.querySelector('.pointer').style.transform = `rotate(${angle}deg)`;

    if (progress < 1) {
        requestAnimationFrame(animate);
    }
}

requestAnimationFrame(animate);

4. 进阶优化：调整目标角度确保精准停靠

在转盘抽奖中，指针需要准确地停在指定奖项上。这要求我们在动画开始前，根据当前角度和目标奖项计算出最终的目标角度。

奖项编号	对应角度范围
1	0° - 60°
2	60° - 120°
...	...

通过预设的奖项角度范围，我们可以动态调整 targetAngle，确保指针停在正确的区域。

5. 设备性能优化

不同设备的性能差异可能导致动画表现不一致。为提升兼容性和视觉体验，可以采取以下措施：

1. 减少不必要的 DOM 操作，尽量将样式变化限制在 GPU 加速属性（如 transform 和 opacity）上。
2. 利用 throttle 或 debounce 技术优化事件监听器，避免频繁触发。

此外，我们还可以通过以下流程图展示动画逻辑：

graph TD;
            A[开始动画] --> B{计算当前时间};
            B --> C[更新角度];
            C --> D{是否完成?};
            D --否--> E[继续下一帧];
            E --> A;
            D --是--> F[结束动画];