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，同时满足二者时，清理定时器。为了防止小方块并为到达指定位置，将其左边线设置为到指定位置

---

案例

代码功能：第一个方块上叠加着一个透明度为0.2的方块，移动鼠标到其他方块，则透明方块会做弹性移动到该方块，代码如下：

html代码

<ul>
    <li class="ele">黑执事</li>
    <li class="ele">火影忍者</li>
    <li class="ele">海贼王</li>
    <li class="ele">死神</li>
    <li class="bg"></li>
</ul>

css代码

ul {
    width: 800px;
    height: 100px;
    padding: 0;
    position: relative;
    top: 100px;
    left: 100px;
    list-style: none;
    border: 1px solid black;
}
ul .ele {
    float: left;
    width: 198px;
    height: 98px;
    background-color: steelblue;
    border: 1px solid black;
    line-height: 98px;
    text-align: center;
}
ul .bg {
    width: 200px;
    height: 100px;
    background-color: black;
    opacity: 0.2;
    position: absolute;
    top: 0;
    left: 0;
}

js代码

var liList = document.getElementsByTagName('li');
var liBg = liList[liList.length - 1];
var timer = null;
for (var i = 0; i < liList.length - 1; i++) {
    liList[i].onmouseenter = function () {
        startMove(liBg, this.offsetLeft);
    }    
}

function startMove(dom, target) {
    clearInterval(timer);
    var speed = 0;
    var a = 3;
    var u = 0.8;
    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';
            console.log(1);
            
        } else {
            dom.style.left = dom.offsetLeft + speed + 'px';
            console.log(speed, target - dom.offsetLeft);            
        }
    },30)
}