数字增加动画函数

Fri, Dec 6, 2019

var numAdd = function(start, end, speed, getFn, setFn) {
    var digits, f, str,arr=[];
    speed = speed || 1;
    // 初始化start
    start = typeof getFn === 'function' && getFn();
    
    if (isNaN(start) || typeof end !== "number" || typeof setFn !== 'function') {
        // 不进行任何操作
        return;
    }
    if (typeof speed !== "number") {
        // 设置值为end
        setFn(end);
        return;
    }
    if (start === end) {
        // 设置值为end
        setFn(end);
        return;
    }
    if (Math.abs(end - start) < 1) {
        // 小于1时
        speed = +String(end - start).replace(/(0\.0*)[1-9]+/, "$11")
    }
    arr = String(end).split(".");
    if(arr.length>1) {
        digits = arr[1].length;
    }
    // 确认能过渡到end
    if ((end - start) * speed <= 0) {
        // 设置值为end
        setFn(end);
    } else {
        id = requestAnimationFrame(f = function() {
            start = start + speed;
            if (Math.abs(end - start) <= Math.abs(speed)) {
                // 设置值为end
                setFn(end);
            } else {
                // 设置值为start.toFixed(digits)
                setFn(start.toFixed(digits));
                // 再进行定时增加
                id = requestAnimationFrame(f);
            }
        });
    }
}

// 结合属性查找实例
var splitPoint = function(obj, attr) {
    var arr = [],
        i = 0,
        length,
        result,
        flag = obj && typeof attr === 'string' && attr !== '';
    if (!flag || attr === '') {
        result = false;
    } else {
        arr = attr.split(".").filter(function(item) {
            return item !== '';
        });
        length = arr.length - 1;
        for (i = 0; i < length; ++i) {
            obj = obj[arr[i]];
            if (!typeof obj === "object") {
                result = false;
                break;
            }
        }
    }
    return {
        get: function() {
            if (result === false) {
                console.error("找不到属性");
            } else {
                return arr.length ? obj[arr[length]] : obj[attr];
            }

        },
        set: function(value) {
            if (value === undefined) {
                console.error("请给参数");
                return;
            } else if (result === false) {
                console.error("找不到属性");
            } else {
                arr.length ? obj[arr[length]] = value : obj[attr] = value;
                
            }
            return obj;
        }
    }
}
var person = {
    money: {
        bank: {
            num: 0
        }
    }
};

var numAdd = function(start, end, speed,getFn, setFn) {
    var digits, f, str,arr=[];
    speed = speed || 1;
    // 初始化start
    start = typeof getFn === 'function' && getFn();
    
    if (isNaN(start) || typeof end !== "number" || typeof setFn !== 'function') {
        // 不进行任何操作
        return;
    }
    if (typeof speed !== "number") {
        // 设置值为end
        setFn(end);
        return;
    }
    if (start === end) {
        // 设置值为end
        setFn(end);
        return;
    }
    if (Math.abs(end - start) < 1) {
        // 小于1时
        speed = +String(end - start).replace(/(0\.0*)[1-9]+/, "$11")
    }
    arr = String(end).split(".");
    if(arr.length>1) {
        digits = arr[1].length;
    }
    // 确认能过渡到end
    if ((end - start) * speed <= 0) {
        // 设置值为end
        setFn(end);
    } else {
        id = requestAnimationFrame(f = function() {
            start = start + speed;
            if (Math.abs(end - start) <= Math.abs(speed)) {
                // 设置值为end
                setFn(end);
            } else {
                // 设置值为start.toFixed(digits)
                setFn(start.toFixed(digits));
                // 再进行定时增加
                id = requestAnimationFrame(f);
            }
        });
    }
}

var obj = splitPoint(person, "money.bank.num");
numAdd(0,0.9,10000,obj.get,obj.set)