js中的运动

1 简单运动(匀速)

box{
    width: 100px;
    height: 100px;
    background-color: #ccc;
    position: absolute;
    top:200px;
    left: 0;
}
<script type="text/javascript">
    var obtn = document.querySelector('button');
    var obox = document.querySelector('.box');
    // 设置速度
    var speed = 10;
    obtn.onclick=function(){
    // 1 先清除掉定时器
    clearInterval(obox.timer);
        obox.timer = setInterval(function(){
        obox.style.left = obox.offsetLeft + speed + 'px'
    },30);
}
</script>

2 指定运动的距离(匀速)

js代码:

<script type="text/javascript">
    var obtn = document.querySelector('button');
    var obox = document.querySelector('.box');
    var totalDistance = 500;
    // 设置速度
    var speed = 10;
    obtn.onclick = function() {
    // 1 先清除掉定时器
    clearInterval(obox.timer);
    obox.timer = setInterval(function() {
    obox.style.left = obox.offsetLeft + speed + 'px'
    if(getStyle(obox,'left') >= totalDistance){
    // 已经到达目的地了
    obox.style.left = totalDistance + 'px';
    // 同时我们还需要清除掉定时器
    clearInterval(obox.timer);
    }
    }, 30);
}
// 封装获取样式的方法  不带px单位的
function getStyle(ele, style) {
    let result = ele.currentStyle ? ele.currentStyle[style] : getComputedStyle(ele, null)[style];
    return parseInt(result);
}
</script>

3 缓冲运动(速度由快到慢，直至停止)

缓冲运动的原理： 速度由距离决定。即: 距离越大速度越大，距离越近，速度越小，直至为0.

4 加速运动(速度由慢到快，直至到达终点)

加速运动和缓冲运动相反，代码也不需要做过多的修改

原理:根据移动的距离来设置速度，也就是正比关系

var obtn = document.querySelector('button');
var obox = document.querySelector('.box');
var totalDistance = 500;
// 设置速度
var speed = null;
obtn.onclick = function() {
// 1 先清除掉定时器
clearInterval(obox.timer);
obox.timer = setInterval(function() {
// 1 获取当前运动的距离
var curPosition = getStyle(obox,'left');
// 2 speed是变化的 动态计算
speed = (curPosition / 10)||1;
// 对speed进行取整操作
// ceil:向上取整
// floor: 向下取整
// 3 *需要对speed进行取整 否则达不到临界值
speed = speed > 0? Math.ceil(speed):Math.floor(speed);
obox.style.left = obox.offsetLeft + speed + 'px';
console.log(speed);
if(getStyle(obox,'left') >= totalDistance){
console.log('我执行了没');
obox.style.left = totalDistance + 'px';
clearInterval(obox.timer);
}
}, 30);
}
// 封装获取样式的方法  不带px单位的
function getStyle(ele, style) {
    let result = ele.currentStyle ? ele.currentStyle[style] : getComputedStyle(ele, null)[style];
    return parseInt(result);
}