单、多方向的定时运动单方向的定时运动多方向的定时运动

单方向的定时运动

<style>
*{
    margin:0;
    padding:0;
    list-style:none;
}
#box{
    width:200px;
    height:200px;
    background:red;
    position:relative;
    left:0;
}
</style>
<body>
    <div id="box"></div>
</body>
<script>
    let box = document.getElementById('box')
    function move(ele,attr,duration,target){
        //要移动的距离  ：  目标位置 - 初始位置
        let start = parseFloat(getComputedStyle(ele)[attr])
        let changeL = targe - start;
        let speed = changeL / duration; //速度
        let l = 0
        var timer = setInterval(()=>{
            l += speed * 20; //  speed*20 一个步长的距离
            if(l >= changeL){
                l = changeL;
                clearInterval(timer)
            }
            ele.style[attr] = start + l + 'px';
        },20)
    }
    move(box,'left',1000,500)//1秒之内向右移动 500像素
</script>

let box = document.getElementById('box')
function move(ele,attr,duration,target){
    let start = parseFloat(getComputedStyle(ele)[attr])
    let time = 0;
    var timer = setInterval(()=>{
        time += 20;
        let l = linear(start,target,duration,time);
        if(l >= target){
            l = target;
            clearInterval(timer)
        }
        ele.style[attr] = l + 'px';
    },20)
}
function linear(begin,target,duration,time){
    // begin 初始值
    // target 目标值
    // duration 运动总时间
    // time 当前运动过的时间
    // 由以上四个值 我们可以算出元素当前的位置
    return (target - begin) / duration * time + begin;
}
move(box,'left',500,500)

多方向的定时运动

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;

        }

        #box {
            width: 200px;
            height: 200px;
            background: salmon;
            position: relative;
            left: 500px;
            /* animation: move 2s linear infinite; */
        }
    </style>
    <body>
    <div id="box"></div>
</body>
<script>
    function linear(b,e,d,t){
        //b begin; e end; d duration; t time;
        return (e - b) / d * t + b;
    }
    function move(ele,attr,duration,target){
        let start = parseFloat(getComputedStyle(ele)[attr])
        let timr = 0; //记录运动过的时间
        let l = 0; //记录当前元素的位置
        let timer = setInterval(()=>{
            time += 10;
            l = linear(start,target,duration,time);
            if(itme >= duration){
                l = target;
                clearInterval(timer)
            }
            ele.style[attr] = l + (attr === 'opacity' ? '' : 'px')
        },10)
    }
    move(box,'opacity',500,0)
    move(box,'left',500,200)
    move(box,'top',500,200)
</script>

var animate = (function () {
    var moveType = {
        linear: function linear(time, changeL, duration, beginL) {
            return changeL / duration * time + beginL;
        },
        easeIn: function (t, c, d, b) {
            return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOut: function (t, c, d, b) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
        },
        easeInOut: function (t, c, d, b) {
            if ((t /= d / 2) < 1) {
                return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            }
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        }
    };
    
    function move(ele,duration,option,type = 'linear',cb){
        let startObj = {};//存放的是各个属性的初始值
        for(var k in option){
            startObj[k] = parseFloat(getComputedStyle(ele)[k])
        }
        let time = 0;// 记录的是运动过的时间
        let l = {};// 记录的是元素当前的位置
        let timer = setInterval(()=>{
            time += 10;
            for(let k in startObj){
                l[k] = moveType[type](time,option[k]) - startObj[k],duration,startObj[k])
            }
            if(time >= duration){
                l = option;// 让 当前位置 等于 目标位置即可
                clearInterval(timer)
                cb && cb();// 回调存在就执行；
            }
            for(let k in option){
                ele.style[k] = l[k] + (k ==='opacity' ? '' : 'px');
            }
        },10)
    }
    
    return function(ele,option,duration,type,cb){
        if(typeof duration == 'function'){
            cb = duration;
            duration = 1000;
        }
        if(typeof type == 'function'){
            cb = type;
            type = 'linear';
        }
        if(typeof duration == 'string'){
            type = duration;
            duration = 1000;
        }
        move(ele,duration,option,type,cb)
    }
    
})()