Design an animation module DEMO using policy mode

Use policy mode to encapsulate an animation module. You can specify a slow function when you start the animation, so as to achieve the effect of failure

// slow function
var easingFunc = {
    linear(t, b, c, d) {
        return c*t/d + b
    },
    easeIn(t, b, c, d) {
        return c * (t /= d) * t + b
    }
}

class Animate{
    constructor(dom) {
        this.dom = dom
        this.startTime = 0
        this.startPos = 0
        this.endPos = 0
        this.propertyName = null // Dynamically changing properties
        this.easing = null  // slow function
        this.duration = null
    }
    start(propertyName, endPos, duration, easing) {
        this.startTime = +new Date(a)this.startPos = this.dom.getBoundingClientRect()[propertyName]
        this.propertyName = propertyName
        this.endPos = endPos
        this.duration = duration
        this.easing = easingFunc[easing] // Data computation delegate algorithm
        var timer = setInterval((a)= > {
            if (this.step() === false) {
                clearInterval(timer)    // Animation ends, clear}},19)}// Delegate processing data to the algorithm
    step() {
        var t = +new Date(a)if (t >= this.duration + this.startTime) {
            this.update(this.endPos)
            return false
        }
        var pos = this.easing(t - this.startTime, this.startPos,
            this.endPos - this.startPos, this.duration)
        this.update(pos)    // Update the animation
    }
    update(pos) {
        this.dom.style[this.propertyName] = pos + 'px'}}var ele = document.querySelector('div')
var animate = new Animate(ele)
animate.start('left'.500.1000.'easeIn')
Copy the code