js中的运动

悠悠 2022-01-11 09:21 180阅读 0赞

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.οnclick=function(){
        // 1 先清除掉定时器
        clearInterval(obox.timer);
            obox.timer = setInterval(function(){
            obox.style.left = obox.offsetLeft + speed + 'px'
        },30);
    }
    </script>

![3.jpg][]![4.jpg][]

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

![5.jpg][]

js代码:

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

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

![6.jpg][]

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

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

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

![1.png][]

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);
    }

转载于:https://blog.51cto.com/11871779/2404410

[3.jpg]: https://s1.51cto.com/images/20190603/1559549200444013.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[4.jpg]: https://s1.51cto.com/images/20190603/1559549299880600.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[5.jpg]: https://s1.51cto.com/images/20190603/1559550076629982.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[6.jpg]: https://s1.51cto.com/images/20190603/1559552245824970.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[1.png]: https://s1.51cto.com/images/20190603/1559552993464329.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=