如何使用jQuery为FiveM服务器速度表的box3元素添加动画效果

问题分析 #

现有代码已计算出速度对应的比例值Speedometer（范围0-1），但缺少将该值映射到box3的--p CSS变量的逻辑，且未添加过渡动画，导致速度变化时box3（速度指示部分）跳转生硬。

解决方案 #

1. 给box3添加CSS过渡效果

修改.box3的CSS，加入过渡属性让--p变量变化时产生平滑动画：

.box3 {
  --v:calc( ((18/5) * var(--p) - 90)*1deg);
  position: absolute;
  left: 0.4vh;
  top: 5;
  width:170px;
  height:170px;
  transform: rotate(160deg);
  border-radius:50%;
  padding:12px;
  /* 添加过渡动画，让--p变化更平滑 */
  transition: --p 0.1s ease-out;
  background:
    linear-gradient(var(--v), transparent 50%,#b7ff00        0) 0/min(100%,(var(--p) - 50)*100%),
    linear-gradient(to right, transparent 50%, #b7ff00 0);
  -webkit-mask:
    linear-gradient(var(--v), #f2f2f2     50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}

2. 修改JavaScript代码实现平滑动画更新

由于jQuery原生animate不支持直接动画CSS变量，我们通过自定义动画逻辑逐步更新--p的值：

if (data.akcija == "spidometar") {
    $(".box-tekstic").html(Math.round(data.speed))
    if (data.speed > 0) {
      $("#SpeedIndicator").text(data.speed);
      let multiplier = data.maxspeed * 0.1;
      let SpeedoLimit = data.maxspeed + multiplier;
      // 计算目标--p值：初始值50对应速度0，满速时对应100
      let targetP = 50 + (data.speed / SpeedoLimit) * 50;
      
      // 用jQuery动画平滑更新box3的--p变量
      $(".box3").animate({
        dummy: targetP
      }, {
        duration: 150, // 动画时长，可根据FiveM帧率调整
        step: function(now) {
          // 实时更新CSS变量
          $(this).css("--p", now.toFixed(2));
        },
        easing: "swing" // 缓动函数，可选linear/swing
      });
    } else {
      // 速度为0时，重置box3到初始状态
      $(".box3").animate({
        dummy: 50
      }, {
        duration: 200,
        step: function(now) {
          $(this).css("--p", now.toFixed(2));
        }
      });
    }
}

关键说明

• targetP的映射逻辑：--p初始值为50（对应速度0），满速时需达到100，因此用50 + 速度比例*50完成范围转换。
• 动画时长建议设置在100-200ms之间，平衡流畅度和速度响应的滞后性。
• CSS过渡与jQuery动画结合，保证在不同场景下都能呈现平滑的速度变化效果。

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