在jQuery中動畫一個方程

Question

我想模擬扔石頭。

在x軸運動方程式：x = v*t*cos(Ɵ)

和在y軸：y = v*t*sin(Ɵ)-.5*g*t^2

v=initial velocity, t=time, Ɵ=the angle of throwing

可否使用動畫（）函數和如何，或有更好的這樣做的方法。 謝謝。

Answer 1

我把一把小提琴做成了我認爲你正在尋找的東西。

您可以根據需要調整角度，G和V變量（或者你可以讓他們HTML輸入，甚至jQuery UI的滑塊。

作爲獎勵，我創建了一個後圖像效果爲「跟蹤」了路徑每幾幀

小提琴：http://jsfiddle.net/azWHu/

來源：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

    <div id="content"> 
     <div id="projectile"></div> 
    </div> 

    <script> 
    var framerate = 50; // Desired frames per second 
    var frame_interval = 1000/framerate; 
    var start_x = null; // desired starting x offset 
    var start_y = null; // desired starting y offset 

    var v = 96.0; // velocity 
    var t = 0; // time 
    var angle = 45.0; // angle 
    var g = 32.0; // gravity 
    var projectile = null; 
    var i = 0; 

    $(function(){ 
     // Document is ready 
     projectile = $("#projectile"); 
     start_x = projectile.offset().left; 
     start_y = projectile.offset().top; 

     // Define an interval that will execute every [frame_interval] milliseconds 
     var anim_interval = setInterval(function() { 
      t = t+ frame_interval; 
      updatePosition(t/1000, start_x, start_y); 
      if (t > 8000) { 
       clearInterval(anim_interval); 
      } 
     }, frame_interval); 

    }); 

    function updatePosition(t, start_x, start_y) { 

     change_x = v*t*Math.cos(angle); 
     change_y = (v*t*Math.sin(angle)) - (0.5*g * Math.pow(t, 2));  

     projectile.css({ 
      left: start_x + change_x + 'px', 
      top: start_y - change_y + 'px' 
     });  

     i++; 
     if (i % 15 == 0) { 
      c = projectile.clone(); 
      c.css("opacity", "0.3"); 
      $("#content").append(c); 
     }  
    } 


    </script> 

    <style> 
    #content { 
     border: 1px solid #000; 
     width: 640px; 
     height: 480px; 
     overflow: hidden; 
     position: absolute; 
    } 
    #projectile { 
     position: absolute; 
     background-color: #ff0000; 
     left:12px; 
     top: 440px; 
     width:8px; 
     height:8px; 
     border-radius: 8px; 
     z-index: 9; 
    } 
    </style>