{"size": 1786, "ext": "js", "max_stars_repo_path": "Chapter5/ballMove.js", "max_stars_repo_name": "windoncloud/DesignPatternInJs", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "Chapter5/ballMove.js", "max_issues_repo_name": "windoncloud/DesignPatternInJs", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "Chapter5/ballMove.js", "max_forks_repo_name": "windoncloud/DesignPatternInJs", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.4769230769, "max_line_length": 104, "alphanum_fraction": 0.5811870101}
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 + 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]
    console.log('this.startPos', this.startPos)
    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')
// animate.start('top', 1500, 500, 'strongEaseIn')