/** * 能够将 任意对象的任意属性改变到任意值(添加了回调函数,在执行完整个动画之后会执行回调函数)添加了透明度和层级 * @param obj * @param json * @param fn */ function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var flag = true; for (var k in json) { if (k === "opacity") { //opacity 是小数 var leader = getStyle(obj, k) * 100;//opacity不需要也不能给默认值 var target = json[k] * 100; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader / 100;//opacity没有单位 } else if (k === "zIndex") { obj.style.zIndex = json[k];//如果是层级就直接设置到目标值 } else { var leader = parseInt(getStyle(obj, k)) || 0; var target = json[k]; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader + "px"; } if (leader !== target) { flag = false; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, 15); } /** * 获取经过计算后对象的属性,不管行内还是外联都可以获取到 * @param obj * @param attr * @returns {*} */ function getStyle(obj,attr){ if(window.getComputedStyle){ return window.getComputedStyle(obj)[attr]; }else{ return obj.currentStyle[attr]; } }
js 缓动框架封装
最新推荐文章于 2022-07-08 20:45:10 发布