js:运动函数、回调函数

运动函数

运动其实就是通过定时器不停的更改元素的属性
运动各种各样 但是我们不可能每一次都手写 如果有一个函数能够帮助我们实现动画就好了

思路： 想要让一个元素进行动画 其实就是用定时器不停的细微的改变这个元素的样式
首先要知道终点、 起点。
终点我们知道，因为是传递进来的。起点我们可以通过getComputedStyle或者 currentStyle获取 为了方便计算 要通过parseInt转为数字
我们定义了一个对象用来存放距离
接着我们去计算需要运动多少次 需要知道总时长 需要知道单次时长
总时长是传递进来的参数 duration 单次时长是固定的设置的20
总距离有了 总次数有了 能够计算步长
开启定时器 每一次让它累加

// animate函数
function animate(dom, cssObj, duration, fun) {
    // 定义一个动画间隔时间
    var interval = 20;
    // 计算整个过程中一共有几步
    var allCount = Math.ceil(duration / interval); //取整
    // 获取dom初始css样式对象
    var styleObj = getComputedStyle(dom);

    // 定义一个对象存放初始距离
    var obj = {};
    // 遍历变化后的css样式对象并把初始css样式对象对应的属性值保存在obj对象中
    for (var i in cssObj) {
        obj[i] = parseInt(styleObj[i]); //取整
    }

    // 定义一个变量，计算走了几步
    var count = 0;
    var timer = setInterval(function() {
        // 步数增加
        count++;
        for (var i in cssObj) {
            // 定义步长 =  (终点值 - 初始值) / 总次数
            var step = (cssObj[i] - obj[i]) / allCount;
            // 元素的当前样式 = 初始值 + 步长 * 步数
            if (i === 'opacity') {
                dom.style[i] = obj[i] + step * count;
            } else {
                dom.style[i] = obj[i] + step * count + 'px';
            }
        }
        // 判定 走的步数如果比总步数还要多 就该停了
        if (count >= allCount) {
            clearInterval(timer);
            //短路语法
            fun && fun.call(dom);
        }
    }, interval)
}

回调函数

新需求：在动画结束之后 我们要弹出一个1
实现需求：将要执行的代码放在一个函数内 把函数当作参数传递进去 再在函数内调用即可