原生JS运动框架封装：startMove()过渡 仿jq animate()

 

最终版：多对象，多属性，链式运动框架(运动队列)

    参数一：对象名

    参数二：属性，目标值  键名：属性名，键值：目标值    {'width':200,'heigth':400}  实现：宽度和高度一起改变，宽度变成200，高度变成400

    参数三：回调函数(可选参数)

 

里面调用的css（）函数是封装的，具体可以去看我的css()封装的内容

 

function startMove(ele, opt, fn) {
      
　　　　　　//清定时器防止叠加
            clearInterval(ele.timer);
　　　　　　//为每个对象绑定定时器
            ele.timer = setInterval(function () {
      
　　　　　　　　//做判断开关
                var istrue = false;
　　　　　　　　　　//遍历可执行多属性
                for (var key in opt) {
      
　　　　　　　　　　　　//初始值
                    var cur = 0;
　　　　　　　　　　　　//当属性为透明度时执行这里
                    if (key == 'opacity') {
      
　　　　　　　　　　　　　　//获取当前透明度并乘100，好计算速度
                        cur = ele.style.opacity * 100;
                    } else {
      
　　　　　　　　　　　　　　//若为其他属性 width height left top。。。获取当前属性值
                        cur = parseInt(css(ele, key));
                    }
　　　　　　　　　　　　　//计算运动速度，目标值-当前值，目标值大于当前值为正，反之为负
                    var speed = (opt[key] - cur) / 4;
　　　　　　　　　　　　//去小数取整，防止运动最后的抖动
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
　　　　　　　　　　　　//判断是否达到目标值，达到开关为true
                    if (cur == opt[key]) {
                        istrue = true;
                    } else {
                        istrue = false;
                    }
　　　　　　　　　　　　　　//判断
                    if (key == 'opacity') {
      
　　　　　　　　　　　　　　//为普通浏览器时透明度为0-1所以除于100，会成功执行这句
                        ele.style.opacity = (cur + speed) / 100;
　　　　　　　　　　　　　　//ie低版本执行这句取值为0-100
                        obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
                    } else {
      
　　　　　　　　　　　　　　//其他属性执行这里，速度+当前属性值，通过速度的正负达到去和回的效果，透明度也是如此
                        ele.style[key] = speed + cur + 'px';
                    }
                }
　　　　　　　　　　//判定成立清理定时器，并判断是否有回调函数有则调用执行
                if (istrue) {
                    clearInterval(ele.timer);
                    if (fn) {
                        fn();
                    }
                }
            }, 30);
        }

 

转载于:https://www.cnblogs.com/muyun123/p/11503467.html