实现减速效果的幸运转盘（Fortune Wheel）动画教程

聖光之護

发布时间：2026-01-30 17:22:11

510人浏览过

来源于php中文网

原创

实现减速效果的幸运转盘（Fortune Wheel）动画教程

本文详解如何使用 css `cubic-bezier()` 缓动函数与 javascript 动态旋转计算，为幸运转盘添加真实物理感的减速停止效果，避免生硬突停，提升用户体验。

在构建轮盘类交互组件（如幸运大转盘、抽奖 roulette）时，匀速旋转会显得机械且缺乏真实感，而模拟真实转盘的“先快后慢、自然停稳”过程，关键在于两点：动画缓动控制与旋转终点精准计算。核心解决方案并非手动逐帧控制旋转角度，而是借助 CSS 的 transition-timing-function 配合精心设计的贝塞尔曲线，让浏览器自动完成减速过渡。

✅ 关键实现：用 cubic-bezier(0.25, 0.1, 0.25, 1) 实现平滑减速

该贝塞尔函数定义了一个典型的“缓入缓出”变体——更准确地说，是缓入 + 强缓出（即起始稍加速，末段大幅减速），非常契合转盘从高速旋转到静止的物理特性。将其应用在 transform 过渡上，即可让整个旋转过程自然衰减：

.circle {
  transition: transform 6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

⚠️ 注意：cubic-bezier(0.25, 0.1, 0.25, 1) 中的 (0.25, 1) 控制结束阶段的陡峭下降，是减速感的核心；若使用 linear 或 ease，减速效果将明显不足。

✅ 动态计算总旋转角度：兼顾随机性与目标对齐

你原始代码中的 rotations 计算逻辑已具雏形，但需优化为可预测的终点对齐模式。推荐采用以下结构化公式（替代原混乱拼接）：

// 假设 wheel 分为 this.max 个扇区（如 8 个）
const targetIndex = Math.floor(Math.random() * this.max); // 目标中奖扇区索引（0-based）
const baseRotations = 5 + Math.floor(Math.random() * 3); // 至少转 5 圈，再加 0~2 圈随机惯性
const fullRotation = 360 * baseRotations;
const sectorAngle = 360 / this.max;
// 精确对齐目标扇区中心：+ sectorAngle/2 补偿起始偏移，- (targetIndex * sectorAngle) 将目标转至箭头下方
const finalRotation = fullRotation + (sectorAngle / 2) - (targetIndex * sectorAngle);

circle.style.transition = `transform ${duration}s cubic-bezier(0.25, 0.1, 0.25, 1)`;
circle.style.transform = `rotate(${finalRotation}deg)`;

此方式确保：无论起始角度如何，最终停稳时，箭头正对目标扇区中心，消除视觉误差。

知识画家

AI交互知识生成引擎，一句话生成知识视频、动画和应用

下载

✅ 终止后精准识别中奖项：基于 DOM 位置而非角度推算

依赖 getComputedStyle().transform 解析角度易受浮点误差和浏览器兼容性影响。更鲁棒的做法是：利用元素在视口中的实际几何位置比对。参考答案中 getBoundingClientRect() 方案即为此思想：

setTimeout(() => {
  circle.style.transition = 'none'; // 立即清除过渡，防止二次触发
  const arrowRect = arrow.getBoundingClientRect();
  const circleRect = circle.getBoundingClientRect();
  const arrowCenterY = arrowRect.top + arrowRect.height / 2;

  let minDist = Infinity;
  let winner = null;

  circle.querySelectorAll('span').forEach(span => {
    const spanRect = span.getBoundingClientRect();
    const spanCenterY = spanRect.top + spanRect.height / 2;
    const dist = Math.abs(spanCenterY - arrowCenterY);
    if (dist < minDist) {
      minDist = dist;
      winner = span.textContent;
    }
  });

  console.log('? Winner:', winner);
}, duration * 1000);