弹性运动在生活中类似考虑阻力的单摆运动,即在指定位置的左右摇摆最后停在指定位置
基础代码
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)
}