js学习笔记 —— 动画封装

动画函数封装

//配合下面函数使用
/* 
    * 样式查询
    * el:dom对象
    * styleStr：样式的名字
*/
function getStyle(el, attr) {
    if (window.getComputedStyle) {
        //其它浏览器
        return window.getComputedStyle(el)[attr]
    } else {
        //ie8及以下的
        return el.currentStyle[attr]
    }
}

/*
    * 动画函数
    * el 操作的对象
    * attr属性值
    * terhet目标位置
    * speed速度
    * callback回调函数
*/
function move(el,attr,target,speed,callback) {
    // 关闭计时器
    clearInterval(el.interId);
    // 调用函数查询当前位置并将结果转化成数字
    let currentVlaue = parseInt(getStyle(el,attr));
    /* 
        * 判断变化方向
        * spaeed如果大于currentVlaue则表示向左或上移动应为减
        * 反之则加
    */
    if(currentVlaue > target) {
        speed = - speed;
    }
    // 动画执行过程
    el.interId = setInterval(function () {
        // 获取元素当前位置
        let oldValue = parseInt(getStyle(el, attr)),
            // 计算移动后的新位置
            newValue = oldValue + speed;
        // 判断当前位置与目标位置的关系
        if (speed > 0 && newValue >= target || speed < 0 && newValue <= target) {
            newValue = target;
        }
        // 将位置改为新位置
        el.style[attr] = newValue + "px";
        // 判断是否到达目标位置
        if (newValue === target) {
            // 关闭计时器
            clearInterval(el.interId)
            // 判断是否有回调函数等同于下面注释掉的方式
            callback && callback()
            // if(callback){
            //   callback()
            // }
        }
    }, 30);
}