使圖像在JQuery中循環路徑的最佳方式是什麼？

Question

我有一張圖片（紅色，如下），我想沿着圓形路徑行進。紅色圖像應始終以與開始時相同的位置結束。

備註： 灰色的圓形路徑是不可見的。我只是強調它將遵循的道路。

什麼是實現這種技術的最佳方法/庫？

Answer 1

你真的需要一個庫，它並不難做到

$(document).ready(function (e) { 
    var startAngle = 0; 
    var unit = 215; 

    var animate = function() { 
     var rad = startAngle * (Math.PI/180); 
     $('.circle').css({ 
      left: 250 + Math.cos(rad) * unit + 'px', 
      top: unit * (1 - Math.sin(rad)) + 'px' 
     }); 
     startAngle--; 
    } 
    var timer = setInterval(animate, 10); 
}); 

FIDDLE

這裏是一個沒有一個循環，在相同的地方停止等。

$(document).ready(function (e) { 
    var startAngle = 180; 
    var unit = 215; 

    var animate = function() { 
     if (startAngle > -180) { 
      var rad = startAngle * (Math.PI/180); 
      $('.circle').css({ 
       left: 250 + Math.cos(rad) * unit + 'px', 
       top: unit * (1 - Math.sin(rad)) + 'px' 
      }); 
      startAngle--; 
      setTimeout(animate, 10); 
     } 
    } 

    $('.circle').on('click', function() { 
     startAngle = 180; 
     animate(); 
    }); 

}); 

FIDDLE

Answer 2

請看看這些鏈接：

• CSS Technique
• ＃1回答：Answer 1 || Answer 2

• 的jsfiddle：Fiddle 1

  var t = 0; 
  
  function moveit() { 
      t += 0.05; 
  
      var r = 100; 
      var xcenter = 100; 
      var ycenter = 100; 
      var newLeft = Math.floor(xcenter + (r * Math.cos(t))); 
      var newTop = Math.floor(ycenter + (r * Math.sin(t))); 
      $('#friends').animate({ 
      top: newTop, 
      left: newLeft, 
      }, 1, function() { 
      moveit(); 
      }); 
  } 
  
  $(document).ready(function() { 
      moveit(); 
  });