微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐