jquery - 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

animate() 関数をどのように使用できますか、またはこれを行うためのより良い方法があります。ありがとう。

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>