原生JS代码封装(输入属性、属性值、动画时长,获得动画效果)

function animate(ele, props, callback) { //属性,属性值,动画时长
    
    stopNow();
    
    ele.timerlist = [];
    ele.cbk = callback;
    
    for (let attr in props) {
        let start = parseFloat(getStyle(ele)[attr]);
        let degree = 0;
        let distance = props[attr] - start;
        let t = setInterval(function() {
            degree += 3;
            // console.log(start + Math.sin(Math.PI / 180 * degree) * distance);
            if(attr == "opacity") {
                ele.style[attr] = start + Math.sin(Math.PI / 180 * degree) * distance;
            } else {
                ele.style[attr] = start + Math.sin(Math.PI / 180 * degree) * distance + "px";
            }
            if (degree == 90) {
                clearInterval(t)
                var index = ele.timerlist.indexOf(t);
                ele.timerlist.splice(index,1);
                ele.timerlist.length == 0 ? (ele.cbk ? ele.cbk() : "" ) : "";
            }
        }, 30);
        ele.timerlist.push(t);
    }

    function getStyle(ele) {
        if (window.VBArray) {
            return ele.currentStyle;
        } else {
            return getComputedStyle(ele);
        }
    }
    
    function stopNow(){
        if(!ele.timerlist) return;
        var t = null;
        while(t=ele.timerlist.pop()) {
            clearInterval(t);
        }
    }
}
原文地址:https://www.cnblogs.com/sunyang-001/p/10813056.html