Animation简单效果

来源：互联网发布：有思度软件编辑：程序博客网时间：2024/06/10 17:19
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Animation简单效果</title></head><body>    <div style="position:absolute;background:blue" id="div">我是div</div></body><script>    var tween = {        linear:function(t,b,c,d){            return c*t/d +b;        },        easeIn:function(t,b,c,d){            return c*(t /= d)*t+b;        },        strongEaseIn:function(t,b,c,d){            return c*(t /= d)*t*t*t*t+b;        },        strongEastOut:function(t,b,c,d){            return c*((t = t / d - 1)*t * t * t * t + 1) + b;        },        sineaseIn:function(t,b,c,d){            return c * ( t /= d) * t * t + b;        },        sineaseOut:function(t,b,c,d){            return c * ((t = t / d - 1) * t * t + 1) + b;        }    }    var Animate = function(dom){    this.dom = dom;//进行运功的dom节点    this.startTime = 0;    this.startPos = 0;    this.endPos = 0;    this.propertyName = null;    this.easing = null;    this.duration = null;    }    /*    *要改变的属性名，比如left表示左右移动    *目标位置    *动画持续时间    *缓动算法    */    Animate.prototype.start = function(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 = this;        var timeId = setInterval(function(){            if(self.step() === false){                clearInterval(timeId);            }        },19)    };    Animate.prototype.step = function(){        var t = +new Date;        if(t >= this.startTime + this.duration){            this.update(this.endPos);            return false;        }        var pos = this.easing(t - this.startTime,this.startPos,this.endPos - this.startPos,this.duration);        this.update(pos);    }    Animate.prototype.update = function(pos){        this.dom.style[this.propertyName] = pos + 'px';    }    var div = document.getElementById('div');    var animate = new Animate(div);    animate.start('top',500,1000,'strongEastOut');</script></html>
0 0