CSS/JS实现类WoW风格技能冷却动画的方向与填充透明度调整

针对两项定制需求的具体改动方案 #

• 冷却遮罩从顺时针方向改为逆时针方向转动
• 交换冷却区域明暗表现，实现冷却未完成区域变暗、已完成冷却区域透出技能图标本身亮度的效果，与WoW原生冷却逻辑对齐

1. 方向调整（顺时针→逆时针） #

原代码的扇形角度映射基于顺时针规则，需修改两处匹配逆时针计算逻辑：

• 修正角度坐标的正方向，为正弦计算添加负号：
  原代码：

  var x1 = cx + r * Math.sin(startangle);
  var y1 = cy - r * Math.cos(startangle);
  var x2 = cx + r * Math.sin(endangle);
  var y2 = cy - r * Math.cos(endangle);
  

  修改为：

  var x1 = cx + r * Math.sin(-startangle);
  var y1 = cy - r * Math.cos(-startangle);
  var x2 = cx + r * Math.sin(-endangle);
  var y2 = cy - r * Math.cos(-endangle);
  

• 修正SVG圆弧的扫掠方向参数，与逆时针角度规则匹配：
  原代码中圆弧的最后一个参数为1（顺时针绘制圆弧），修改为0（逆时针绘制圆弧）
  原代码：

  var d = "M " + cx + "," + cy + " L " + x1 + "," + y1 +
      " A " + r + "," + r + " 0 " + big + " 1 " +
      x2 + "," + y2 + " Z";
  

  修改为：

  var d = "M " + cx + "," + cy + " L " + x1 + "," + y1 +
      " A " + r + "," + r + " 0 " + big + " 0 " +
      x2 + "," + y2 + " Z";
  

2. 明暗效果交换 #

原代码中遮罩填充色为亮灰色#AAA，会造成冷却中区域变亮、透明区域露出原生暗色图标的反向效果，需调整三处匹配预期：

• 替换遮罩填充色为半透明深色，实现冷却区域的暗化效果：
  原代码颜色定义：

  var colors = [null, '#AAA'];
  

  修改为：

  var colors = [null, 'rgba(0, 0, 0, 0.7)'];
  

• 调整cooldown容器的基础样式，避免深色遮罩叠加过暗：
  原CSS：

  .cooldown {
      position: absolute;
      opacity: 0.8;
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
  }
  

  修改为：

  .cooldown {
      position: absolute;
      opacity: 1;
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
      pointer-events: none;
      z-index: 2;
  }
  

• 给冷却文本元素补全层级设置，保证冷却数字显示在遮罩上层：
  原文本样式追加z-index属性：

  .skill .text {
      font-size: 14px;
      color: #E1E5EB;
      text-shadow: 1px 1px 1px #000000;
      line-height: 44px;
      text-align: center;
      background-color: transparent;
      z-index: 3;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
  }
  

改动后效果验证 #

• 点击技能后，初始状态全区域覆盖半透明黑遮罩，技能整体变暗
• 遮罩从12点正上方位置开始，以逆时针方向逐步缩小，露出底下明亮的技能图标
• 冷却完全结束后，遮罩完全消失，技能恢复全亮可交互状态

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