前言

提到微信的摇骰子表情包，相信大家都耳熟能详。那种期待与惊喜交织的感觉，仿佛能瞬间拉近人与人之间的距离。今天，我们就来探索如何用前端技术，轻松实现一个逼真的摇骰子功能。

效果展示：点数绘制

首先，让我们来欣赏一下骰子的魅力。六个面，每个面都有不同的点数，从1到6。为了实现这个效果，我们可以使用flex布局，轻松“梭”出每一个点数。

<div class="face front" data-value="1">
  <div class="dot"></div>
</div>
<div class="face bottom" data-value="2">
  <!-- ... -->
</div>
<!-- ... 其他面 ... -->

每个面都有一个小圆点，通过不同的背景颜色来区分。而隐藏的点，则是我们接下来要使用的“占位符”。

CSS样式：骰子面通用样式与点数布局

为了让骰子看起来更逼真，我们需要一些CSS样式。首先，我们定义了骰子面的通用样式，包括位置、大小、背景色等。然后，我们设置了点数的布局，让每个点数都有一个固定的位置。

.face {
  position: absolute;
  width: 180px;
  height: 180px;
  background: # fff;
  border: 2px solid # 333;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dot {
  width: 30px;
  height: 30px;
  background: # 333;
  border-radius: 50%;
  margin: 10px;
}

.hide-dot {
  visibility: hidden;
}

正方体拼接：3D变换

接下来，我们要让骰子动起来。通过CSS的transform属性，我们可以轻松实现骰子的3D变换。每个面都有不同的旋转角度，让我们来定义这些角度。

.front {
  transform: translateZ(90px);
}

.back {
  transform: rotateY(180deg) translateZ(90px);
}

.top {
  transform: rotateX(90deg) translateZ(90px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(90px);
}

.left {
  transform: rotateY(-90deg) translateZ(90px);
}

.right {
  transform: rotateY(90deg) translateZ(90px);
}

旋转映射表：定义每个点数的旋转角度

为了让每个点数都能按照预期的方式旋转，我们需要一个旋转映射表。这个表告诉我们每个点数对应的旋转角度。

const rotateMap = {
  1: { rotateX: "0deg", rotateY: "0deg" },
  2: { rotateX: "90deg", rotateY: "0deg" },
  3: { rotateX: "180deg", rotateY: "90deg" },
  4: { rotateX: "0deg", rotateY: "90deg" },
  5: { rotateX: "270deg", rotateY: "0deg" },
  6: { rotateX: "0deg", rotateY: "180deg" },
};

获取骰子点数与旋转骰子函数

现在，我们需要一个函数来获取骰子的点数，并根据这个点数旋转骰子。我们可以通过随机数生成器来获取点数，然后使用旋转映射表来计算旋转角度。

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function rollDice() {
  const dice = document.getElementById("dice");
  const result = document.getElementById("result");
  const rollBtn = document.getElementById("rollBtn");
  const randomValue = getRandom(1, 6);
  const obj = rotateMap[randomValue];
  let transform = "";
  let transform2 = "";

  for (const key in obj) {
    transform += `${key}(${obj[key]}) `;
    transform2 += `${key}(${parseInt(obj[key]) + 360 * 2}deg) `;
  }

  dice.style.transition = "transform 2s cubic-bezier(0.25, 0.1, 0.25, 1)";
  dice.style.transform = transform2;
  rollBtn.disabled = true;
  rollBtn.style.background = "# ccc";
  result.textContent = "正在摇骰子...";

  setTimeout(() => {
    dice.style.transition = "none";
    dice.style.transform = transform;
    rollBtn.disabled = false;
    rollBtn.style.background = "# 2196f3";
    result.textContent = `点数：${randomValue}`;
  }, 2100);
}

双重动画欺骗：两阶段CSS变换

为了实现更逼真的效果，我们可以使用两阶段CSS变换。首先，我们使用transform2执行720度加速旋转，然后瞬间切换为实际点数的transform。这种视觉差手法既保证了2秒的观赏性动画，又能准确定位最终点数。

交互状态管理：完整的交互闭环

为了实现完整的交互闭环，我们可以使用setTimeout和按钮的disabled属性。点击后立即禁用按钮、切换背景色，待2.1秒动画结束后恢复交互，同时更新DOM元素显示最终点数。

setTimeout(() => {
  // 动画结束后的处理逻辑
}, 2100);

过渡曲线：cubic-bezier(0.25, 0.1, 0.25, 1)

我们还可以设置过渡曲线为cubic-bezier(0.25, 0.1, 0.25, 1)，使旋转呈现先快后慢的物理惯性效果。

源码分享：源码已上传到gitee

如果你对这个摇骰子功能感兴趣，可以在这里查看源码：gitee.com/zheng_yongt。如果你有任何问题或错误，欢迎指出，我会认真改进。如果你有什么想要实现的功能或想法，也可以联系我。

结语

最后，感谢大家的支持。如果你觉得这篇文章对你有帮助，可以点个星标。如果你有任何问题或建议，欢迎随时联系我。让我们一起学习、一起进步吧！