zoukankan      html  css  js  c++  java
  • JavaScript 运动(加速度运动,弹性运动)

    加速度运动(加速度不变的加速运动)

    function addSpeed(dom){
                var a = 5;
                timer = setInterval(function(){
                    speed =  speed + a;
                    dom.style.left = dom.offsetLeft + speed + 'px';
                },30)
            }

    弹性运动

    当一根弹簧链接小球弹性运动时过程

    1. (钉子左侧),小球运动方向向右,受到的力向右,加速度向右,做加速度减小的加速运动
    2. 当向右时(钉子右侧),小球运动方向向右,收到的力向左,加速度向左,做加速度增加的减速运动
    3. 当向左时(钉子右侧),小球运动方向向左,收到的力向左,加速度向左,做加速度减小的加速运动
    4. 当向左时(钉子左侧),小球运动方向向左,收到的力向右,加速度向右,做加速度增大的减速运动

    也就是说当小球距离钉子(目标位置)越远,受到的加速度越大,随着距离不断减小,加速度也不断减小。在实现代码时通过判断物体距离目标点的距离来控制加速度的大小,也就是说我们可以使用a = target - dom.offsetleft;由于此时加速度太大可以除以一个数。

    function moveStart(dom, targetPosition) {
                clearInterval(timer);
                var speed = 0; var a = 3;
                timer = setInterval(function () {
                    a = (targetPosition - dom.offsetLeft) / 5;
                    speed = speed + a;
                    speed = speed * 0.8;if (Math.abs(speed) < 1 && Math.abs(targetPosition - dom.offsetLeft) <= 1) {
                        clearInterval(timer);
                        dom.style.left = targetPosition + "px";
                    } else {
                        dom.style.left = dom.offsetLeft + speed + "px";
                    }
                }, 30)
            }

    而在真生的弹性运动中,由于受到摩擦力以及空气阻力,是有速度的能量损耗的。我们让摩擦力作用在速度的身上例如:speed * u;当speed减小到0并且距离目标位置小于1是,停止定时器。

  • 相关阅读:
    Android 开发技术周报 Issue#276
    手动添加 Git bash 到鼠标右键
    Sublime Text3 3143 注册码
    MySQL主从复制
    Python-MongoDB的驱动安装、升级
    MongoDB数据库的安装、配置和使用
    js循环生成多个easyui datagrid数据网格时,初始化表格
    屏蔽掉Google Chrome 浏览器 textarea 单词拼写检测
    Fiddler屏蔽某些url的抓取方法
    解决VMware下安装Ubuntu 16.04 不支持1920X1080分辨率的问题
  • 原文地址:https://www.cnblogs.com/jiaobaba/p/11488334.html
Copyright © 2011-2022 走看看