05一个物体得缓冲运动的实例

作者: An的杂货铺 | 来源:发表于2019-03-12 11:28 被阅读0次

05一个物体得缓冲运动的实例
js运动之"物体向左右缓冲运动"
JS运动
Oracle常见问题
JavaScript 运动 03 —— 缓冲运动
6-运动的相对性&二力平衡
缓冲运动
机械运动
《利维坦》第二章读书笔记
Unity实例化一个对象和出现的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 100px;
        }
    </style>
</head>
<body>
    <button id="btn">move</button>
    <div class="box"></div> 
    <script>
        // 单击按钮 让div变速运动到1000px停止
        var btn = document.getElementById("btn");
        var oDiv = document.querySelector("div");
        var timer = null;
        btn.onclick = function() {
            startMove(oDiv,1000);
        }
        var num = 0;     
        // 封装运动函数
        function startMove(obj,target) {
            clearInterval(timer);
            timer = setInterval(function() {
                var speed = (target-obj.offsetLeft)/10; //此时速度不是匀速不变的而是发生变化的
                num += speed;
                if ( obj.offsetLeft === target ) { 
                    clearInterval(timer);
                } else {
                    obj.style["left"] = num + "px";  
                    //obj.style.left = num+'px';
                    // console.log(obj.style.left)
                }
            },20);
        }
    </script>    
</body>
</html>

该物体运动时速度由快变慢