1,我们用JavaScript原生来实现缓动动画的效果,这个是缓动动画的原理
//获取元素样式计算后的值 function getStyle(element, attr) { return element.currentStyle ? element.currentStyle[attr] : window.getComputedStyle(element, null)[attr]; } //animate动画包含三个参数 1.对象 2元素属性和值对象(写属性和值)3回调函数动画 function animate(element, json,fn) { clearInterval(element.timeId); element.timeId = setInterval(function () { var flag=true; for (var attr in json) { if(attr=="opacity"){//关于透明度改变 var current = getStyle(element, attr)*100; var target=json[attr]*100; //每次移动的步数 var step = (target - current) / 10; //每次移动步数都是整数(比较大的数字) step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的当前的像素 element.style[attr] = current/100; }else if(attr=="zIndex"){关于层级改变 element.style[attr]=json[attr]; }else{ 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(); } } }, 20); }
希望大家都可以了解一下~~~~