zoukankan      html  css  js  c++  java
  • JS实现缓动效果-让div运动起来

    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;
        },
        strongEaseOut: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 *t +1 ) + b;
        }
    };
    
    var Animate = function(dom){
        this.dom = dom;
        this.startTime = 0;
        this.startPos = 0;
        this.endPos = 0;
        this.propertyName = null;
        this.easing = null;
        this.duration = null;
    }
    
    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('left',500,1000,'strongEaseOut');
  • 相关阅读:
    发邮件(asp.net2.0)(转)
    教师节祝福短信
    量子学习及思考13人机交互很快将面临交互模式的进化2 人工智能
    MongoDB(1) 简单配置
    CreateCompatibleDC
    设置环境变量的作用
    vs2008中调用matlab生成的dll
    resolve the maado15.dll
    错误3:系统找不到指定的路径
    C++关键字volatile
  • 原文地址:https://www.cnblogs.com/moqiutao/p/7124475.html
Copyright © 2011-2022 走看看