javascript - 雷达扫描仪旋转效果

Question

我正在尝试找出一个可能的解决方案，如何使用 jQuery 和 CSS 创建雷达扫描仪效果。本质上，半透明三 Angular 形光束将围绕 div 的中点旋转。这可以通过 jQuery 实现吗？或者我应该采用其他方法吗？
我不想使用 gif 动画。

Answer 1

你不需要 jQuery 来实现雷达扫描仪

• 对于无限雷达光束旋转，仅使用CSS animation和CSS rotate一整圈1turn作为线性和无限计时。
• 在 JavaScript 中，使用 requestAnimationFrame 处理点的不透明度，以不断获取当前光束旋转 Angular ，将点 x、y 转换为 Angular ，并根据两个 Angular 归一化差异计算不透明度增量

const getCSSVal = (e, v) => e.style.getPropertyValue(v);
const mod = (n, m) => ((n % m) + m) % m; // Fix negative Modulo
const PI = Math.PI;
const TAU = PI * 2;

const radar = (elRadar) => {

  const elBeam = elRadar.querySelector(".beam");
  const elsDot = elRadar.querySelectorAll(".dot");

  const update = () => {
    const beamAngle = parseFloat(getComputedStyle(elBeam).getPropertyValue("rotate")) * PI / 180 || 0;

    elsDot.forEach(elDot => {
      const x = getCSSVal(elDot, "--x") - 0.5;
      const y = getCSSVal(elDot, "--y") - 0.5;
      const dotAngle = mod(Math.atan2(y, x), TAU);
      const opacity = mod(dotAngle - beamAngle, TAU) / TAU;
      elDot.style.opacity = opacity;
    });

    requestAnimationFrame(update);
  };
  
  update();
};

document.querySelectorAll(".radar").forEach(radar);

.radar {
  position: relative;
  overflow: hidden;
  width: 300px;
  aspect-ratio: 1;
  background: #000 url(/image/vY6Tl.png) center / cover;
  border-radius: 50%;
}

.beam {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  aspect-ratio: inherit;
  background: url(/image/GCbf1.png) center / cover;
  animation: 5s rotate linear infinite;
}

@keyframes rotate {
  100% {
    rotate: 1turn;
  }
}

.dot {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  border-radius: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  background: #cf5;
  box-shadow: 0 0 10px 5px rgba(100, 255, 0, 0.5);
  opacity: 0;
}

<div class="radar">
  <div class="beam"></div>
  <div class="dot" style="--x:0.7; --y:0.2"></div>
  <div class="dot" style="--x:0.2; --y:0.3"></div>
  <div class="dot" style="--x:0.6; --y:0.1"></div>
  <div class="dot" style="--x:0.4; --y:0.6"></div>
  <div class="dot" style="--x:0.9; --y:0.7"></div>
</div>