Animation简单效果

最新推荐文章于 2020-03-04 22:23:39 发布

费小存

最新推荐文章于 2020-03-04 22:23:39 发布

阅读量406

点赞数

文章标签：动画

本文链接：https://blog.csdn.net/F1594952/article/details/53544762

版权

<!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>