JavaScript的运动——弹性运动

弹性运动在生活中类似考虑阻力的单摆运动，即在指定位置的左右摇摆最后停在指定位置，代码如下

html代码

<div></div>
<span></span>

css代码

div {
    width: 100px;
    height: 100px;
    background-color: steelblue;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
span {
    width: 1px;
    height: 100px;
    background-color: black;
    position: absolute;
    top: 0;
    left: 300px;
}

js代码

var oDiv = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
oDiv.onclick = function () {
    startMove(this,300)
}
function startMove(dom, target) {
    clearInterval(timer);
    var speed = 0;
    var a = 3;
    var u = 0.8;
    var timer = setInterval(function () {
        a = (target - dom.offsetLeft) / 5;
        speed += a;
        speed *= u;
        if (Math.abs(speed) < 1 && Math.abs(target - dom.offsetLeft) < 1) {
            clearInterval(timer);
            dom.style.left = target + 'px';
        } else {
            dom.style.left = dom.offsetLeft + speed + 'px';
            console.log(speed, target - dom.offsetLeft);            
        }
    },30)
}

问题1：实现加速度减小的加速运动和加速度增大的减速运动

解决：由单摆运动的原理可知，随着小方块的左边线与指定位置的距离减小，加速度减小，由此可建立二者的关系，控制增大或者减小加速度（该思路与缓冲运动利用距离减小控制速度变化相同）

问题2：小方块要停留在指定位置

解决：首先需要增加一个摩擦系数u来消耗动能；其次分析小方块速度可为0的点，除了最终的指定位置速度为0，还有运动到两边加速度最大，速度为0的临界点，因此定时器清除的条件有两个，一是速度为0，二是小方块的左边线到达指定位置。

问题3：实际过程中，速度基本不可能正好为0，左边线也不能正好到达指定位置，因此虽然小方块看起来停住了，但是定时器并没有清除

解决：将判定条件改为速度与距离的绝对值均小于1，同时满足二者时，清理定时器。为了防止小方块并为到达指定位置，将其左边线设置为到指定位置

弹性运动的内容就这些，后续会写弹性运动的案例

• 点赞
• 收藏
• 分享
• • 文章举报

做一条抹香鲸 发布了5 篇原创文章 · 获赞 2 · 访问量 786 私信 关注

标签：target,dom,小方块,JavaScript,指定,弹性,var,运动,speed
来源： https://blog.csdn.net/weixin_44584442/article/details/104561386