日期:2014-05-16  浏览次数:20318 次

js模仿物理中的自由落体现象

前几天在一个社区中无意看到,有人在写自由落体运动,当时顺手把他的代码copy下来,运行一下,发现没有成功,于是就有了这篇博客!

主要是由一个自由落体函数freeFall(),传入参数element,height,speed,即落体元素,高度,水平速度

/*自由落到函数
      *param height : 初始高度;
      *param speed  : 初始速度;
    */
    function freeFall(element, height, speed){
        var start = (new Date()).getTime();
        var el = element;
        var originalStyle = el.style.cssText;
        var timeInterval = 50 ,// 50ms 变换一下速度;
            left = el.offsetLeft, //初始位置
            top = el.offsetTop; //
        var time = Math.sqrt(2 * height / g) * 1000 // h = 1/2 * g * t * t 算得时间 单位为ms;
        console.log(originalStyle, left, top, time);
        moving();
        function moving(){
            var now = (new Date()).getTime();
            var elapsed = now - start;
            var fraction = elapsed / time;
            console.log(now, elapsed, fraction);
            if(fraction < 1){
                var x = left + speed * elapsed / 100; //水平位移; 时间单位为ms 所以需要转换;
                var y = top + 0.5 * g * elapsed * elapsed / 10000; //垂直位移 

                el.style.left = x + 'px';
                el.style.top = y + 'px'; 
                console.log(x, y);
                setTimeout(moving, Math.min(25, time - elapsed));
            }else{
                el.style.cssText = originalStyle; //恢复原状
            }
        }
    }
具体的demo在我的github上:https://github.com/chenkehxx/practice/blob/test/freeFall.html