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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值