封装运动函数最终版

封装运动函数最终版

function animate(ele, obj, duration, callback) {
    // 定义一个固定的时间间隔
    let interval = 20;
    // 知道起点
    let startObj = {};
    for (let i in obj) {
        startObj[i] = parseInt(getComputedStyle(ele)[i]);
    }
    // 知道总次数
    let allCount = duration / interval;
    // 定义变量记录次数
    let count = 0;
    let timer = setInterval(function () {
        count++;
        // 循环改变元素的属性
        for (let i in obj) {
            let result = startObj[i] + (obj[i] - startObj[i]) / allCount * count;
            ele.style[i] = (i.toLowerCase() === "opacity") ? result : (result + "px");
        }
        // 停止
        if (count >= allCount) {
            clearInterval(timer);
            callback && callback(); // 等价于 if (callback) {callback()}
        }
    }, interval)
}

思路：
    1 获取一个元素的起点和终点 计算总距离
    2 获取总时长 获取单次运动间隔 得出总次数
    3 算出步长
    4 开启定时器 让定时器每一次都改变一次元素的属性
     5 累计定时器的执行次数 当超过或者等于总次数的时候 说明到达了目的地 此时清除定时器
    6 执行回调函数

getComputedStyle是window全局对象的一个方法，可以传递两个参数。
第一个参数指定一个用来获取计算样式的DOM元素，
第二个参数（可选）指定一个要匹配的伪元素的字符串，普通元素可省略或传null。