变速动画函数封装增加任意多个属性值

Posted 2021-01-24 lujieting0

//计算后的样式属性---- 一个元素的任意的一个样式属性值
function getStyle(element,attr) {
    //判断这个浏览器是否支持这个方法
    return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
//匀速动画
function animate(element,json,fn) {  //element--元素   attr--属性名字   target--目标位置
    //清理定时器
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        var flag=true;//默认，假设，全部到达目标
        for(var attr in json){
            //获取元素当前位置
            var current=parseInt(getStyle(element,attr));//数字类型
            //当前的属性对应的目标值
            var target=json[attr];
            //移动的步数
            var step=(target-current)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            current+=step;
            element.style[attr]=current+"px";
            if(current!=target){
                flag=false;
            }
            }
        if(flag){
            //清理计时器
            clearInterval(element.timeId);
            //回调函数,所有属性达到目标后才能使用
            if(fn){
                fn();
            }
        }