jquery - 使用jquery的雷达扫描仪效果

Question

我正在尝试找出一个可能的解决方案，以了解如何使用 jquery 和 css 创建雷达扫描仪效果。本质上，半透明三角形会围绕 div 的中点旋转。这可能与 jquery 还是我应该诉诸其他方式？我宁愿不使用动画 gif。

Answer 1

$(function() {

  var $rad = $('#rad'),
      $obj = $('.obj'),
      deg = 0,
      rad = $rad.width() / 2;

  $obj.each(function(){
    var pos = $(this).data(),
        getAtan = Math.atan2(pos.x-rad, pos.y-rad),
        getDeg = (-getAtan/(Math.PI/180) + 180) | 0;
    // Read/set positions and store degree
    $(this).css({left:pos.x, top:pos.y}).attr('data-atDeg', getDeg);
  });

  (function rotate() {      
    $rad.css({transform: 'rotate('+ deg +'deg)'}); // Radar rotation
    $('[data-atDeg='+deg+']').stop().fadeTo(0,1).fadeTo(1700,0.2); // Animate dot at deg

    deg = ++deg % 360;      // Increment and reset to 0 at 360
    setTimeout(rotate, 25); // LOOP
  })();

});

#radar{
  position:relative;
  overflow:hidden;
  width:321px; height:321px;
  background:#222 url(http://i.stack.imgur.com/vY6Tl.png);
  border-radius: 50%;
}
#rad{
  position:absolute;
  width:321px;
  height:321px; background:url(http://i.stack.imgur.com/fbgUD.png);
}
.obj{
  background:#cf5;
  position:absolute;
  border-radius: 50%;
  width:4px; height:4px; margin:-2px;
  box-shadow:0 0 10px 5px rgba(100,255,0,0.5);
  opacity:0.2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="radar">
    <div id="rad"></div>
    <div class="obj" data-x="120" data-y="65"></div>
    <div class="obj" data-x="140" data-y="185"></div>
    <div class="obj" data-x="220" data-y="35"></div>
    <div class="obj" data-x="120" data-y="235"></div>
  </div>

基本旋转循环:

<div id="radar">
    <div id="rad"></div>
</div>

CSS:

#radar{
  position:relative;
  width:321px;
  height:321px;
  background:#222 url(http://i.stack.imgur.com/vY6Tl.png);
  border-radius:320px;
}
#rad{
  position:absolute;
  width:321px;
  height:321px; background:url(http://i.stack.imgur.com/fbgUD.png);
}

jQuery:

$(function() {
  
    var $rad = $('#rad'),
        d = 0;

    (function rotate() {    
        $rad.css({ transform: 'rotate('+ d +'deg)'}); // apply CSS3
        setTimeout(function() {
            ++d;         // next degree
            rotate();    // recall function
        }, 25);          // every 25ms
    })();                // 1st start
  
});