JS实现缓动效果-让div运动起来

前端之家收集整理的这篇文章主要介绍了JS实现缓动效果-让div运动起来前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
var tween = {
    linear:function(t,b,c,d){
        return c*t/d + b;
    },easeIn:return c * ( t /= d ) * t + b;
return c * ( t /= d ) * t * t * t * t + b;
SEOut:return c * ( ( t = t / d -1 ) * t * t * t * t +1 ) + b;
    },sineaseIn:return c * ( t /= d ) * t * t + b;    
SEOut:return c * ( ( t = t / d -1 ) * t * t *t +1 ) + b;
    }
};

var Animate = (dom){
    this.dom = dom;
    this.startTime = 0;
    this.startPos = 0this.endPos = 0this.propertyName = nullthis.easing = this.duration = ;
}

Animate.prototype.start = (propertyName,endPos,duration,easing){
    this.startTime = +new Date;
    this.startPos = this.dom.getBoundingClientRect()[propertyName];
    this.propertyName = propertyName;
    this.endPos = endPos;
    this.duration = duration;
    this.easing = tween[easing];

    var self = var timeId = setInterval((){
        if(self.step() === false){
            clearInterval(timeId);
        }
    },19);
}

Animate.prototype.step = (){
    var t = +if(t>=this.startTime + .duration){
        this.update(.endPos);
        return ;
    }
    var pos = this.easing(t-this.startTime,this.startPos,1)">this.endPos - .duration);
    .update(pos);
}

Animate.prototype.update = (pos){
    this.dom.style[this.propertyName] = pos + 'px';
}

var div = document.getElementById('div');
var animate =  Animate(div);
animate.start('left',500,1000,'strongEaSEOut');

 

猜你在找的JavaScript相关文章