缓动动画的原理

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);
}

希望大家都可以了解一下~~~~