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>