一個精簡的js動畫庫實現 (可自行擴展需要的內容)

一個精簡的js動畫庫實現

項目地址

animation.js

因爲項目需要作一些動畫，並不想讓整個項目引入太多的內容致使文件過大，因此爲了知足要求寫了一個精簡的可擴展的動畫庫功能是簡單模仿d3.js裏面的tween函數

用法：

Animation()
  .easing(Animation.easing.Linear)
  .delay(500)
  .duration(1000)
  .run((i) => {
    // 這裏的i會返回0到1之間的數字
    // 再根據狀況本身處理需要處理的動畫
    // eg: 改變div left 屬性 10 到 100
    document.querySelector('.box').style.left = 10 + 90 * i + 'px'
  })
  .then(() => {
    alert('finish')
  })

代碼過程：

首先，需要一個緩動函數，這個網上一搜一大把
這裏帖上一個

let easing = {
  Linea: function (t, b, c, d) {
    return c * t / d + b
  },
  Quad: {
    easeIn: function (t, b, c, d) {
      return c * (t /= d) * t + b
    },
    easeOut: function (t, b, c, d) {
      return -c * (t /= d) * (t - 2) + b
    },
    easeInOut: function (t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t + b
      return -c / 2 * ((--t) * (t - 2) - 1) + b
    }
  },
  Cubic: {
    easeIn: function (t, b, c, d) {
      return c * (t /= d) * t * t + b
    },
    easeOut: function (t, b, c, d) {
      return c * ((t = t / d - 1) * t * t + 1) + b
    },
    easeInOut: function (t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t * t + b
      return c / 2 * ((t -= 2) * t * t + 2) + b
    }
  },
  Quart: {
    easeIn: function (t, b, c, d) {
      return c * (t /= d) * t * t * t + b
    },
    easeOut: function (t, b, c, d) {
      return -c * ((t = t / d - 1) * t * t * t - 1) + b
    },
    easeInOut: function (t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b
      return -c / 2 * ((t -= 2) * t * t * t - 2) + b
    }
  },
  Quint: {
    easeIn: function (t, b, c, d) {
      return c * (t /= d) * t * t * t * t + b
    },
    easeOut: function (t, b, c, d) {
      return c * ((t = t / d - 1) * t * t * t * t + 1) + b
    },
    easeInOut: function (t, b, c, d) {
      if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b
      return c / 2 * ((t -= 2) * t * t * t * t + 2) + b
    }
  },
  Sine: {
    easeIn: function (t, b, c, d) {
      return -c * Math.cos(t / d * (Math.PI / 2)) + c + b
    },
    easeOut: function (t, b, c, d) {
      return c * Math.sin(t / d * (Math.PI / 2)) + b
    },
    easeInOut: function (t, b, c, d) {
      return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
    }
  },
  Expo: {
    easeIn: function (t, b, c, d) {
      return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
    },
    easeOut: function (t, b, c, d) {
      return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
    },
    easeInOut: function (t, b, c, d) {
      if (t == 0) return b
      if (t == d) return b + c
      if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b
      return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
    }
  },
  Circ: {
    easeIn: function (t, b, c, d) {
      return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
    },
    easeOut: function (t, b, c, d) {
      return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
    },
    easeInOut: function (t, b, c, d) {
      if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b
      return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
    }
  },
  Elastic: {
    easeIn: function (t, b, c, d, a, p) {
      if (t == 0) return b
      if ((t /= d) == 1) return b + c
      if (!p) p = d * 0.3
      if (!a || a < Math.abs(c)) {
        a = c
        var s = p / 4
      } else var s = p / (2 * Math.PI) * Math.asin(c / a)
      return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
    },
    easeOut: function (t, b, c, d, a, p) {
      if (t == 0) return b
      if ((t /= d) == 1) return b + c
      if (!p) p = d * 0.3
      if (!a || a < Math.abs(c)) {
        a = c
        var s = p / 4
      } else var s = p / (2 * Math.PI) * Math.asin(c / a)
      return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b)
    },
    easeInOut: function (t, b, c, d, a, p) {
      if (t == 0) return b
      if ((t /= d / 2) == 2) return b + c
      if (!p) p = d * (0.3 * 1.5)
      if (!a || a < Math.abs(c)) {
        a = c
        var s = p / 4
      } else var s = p / (2 * Math.PI) * Math.asin(c / a)
      if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
      return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b
    }
  },
  Back: {
    easeIn: function (t, b, c, d, s) {
      if (s == undefined) s = 1.70158
      return c * (t /= d) * t * ((s + 1) * t - s) + b
    },
    easeOut: function (t, b, c, d, s) {
      if (s == undefined) s = 1.70158
      return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b
    },
    easeInOut: function (t, b, c, d, s) {
      if (s == undefined) s = 1.70158
      if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b
      return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b
    }
  },
  Bounce: {
    easeIn: function (t, b, c, d) {
      return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b
    },
    easeOut: function (t, b, c, d) {
      if ((t /= d) < (1 / 2.75)) {
        return c * (7.5625 * t * t) + b
      } else if (t < (2 / 2.75)) {
        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
      } else if (t < (2.5 / 2.75)) {
        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
      } else {
        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
      }
    },
    easeInOut: function (t, b, c, d) {
      if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * 0.5 + b
      else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b
    }
  }
}

其次，咱們需要用到requestAnimationFrame,要先解決一下兼容性問題
這個也是網上一找一大把,這裏貼上我用的代碼

var vendors = ['webkit', 'moz']
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
  window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
    window[vendors[x] + 'CancelRequestAnimationFrame']
}

if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = function (callback, element) {
    var currTime = new Date().getTime()
    var timeToCall = Math.max(0, 16.7 - (currTime - lastTime))
    var id = window.setTimeout(function () {
      callback(currTime + timeToCall)
    }, timeToCall)
    lastTime = currTime + timeToCall
    return id
  }
}
if (!window.cancelAnimationFrame) {
  window.cancelAnimationFrame = function (id) {
    clearTimeout(id)
  }
}

而後，咱們需要定義一下時間戳的兼容函數，後面會用到

function time () {
  if (typeof performance !== 'undefined' && performance.now) {
    return performance.now()
  }
  return Date.now ? Date.now() : (new Date()).getTime()
}

最後，咱們要開始製做整個動畫的主要內容了

核心是利用緩動函數進行目標值生成

緩動參數的說明:
t: 已經流逝的時間
b: 初始值
c: 目標值
d: 總時間

能夠看出來緩動函數的大概功能是
根據 【t所佔d的比例】
算出 【b-c之間的值】

咱們只需要開始一個輪詢，傳入執行函數的時間和值直到結束就好了
下面看代碼

class AnimationCore {
  constructor () {
    this.__duration__ // 執行動畫的時間
    this.__delay__ = 0 // 開始動畫的間隔
    this.__action__ // 傳入的處理函數
    this.__easing__ = easing.Linear // 緩動函數
    this.__startTime__ // 開始動畫的時間戳
    this.resolve = null
    this.timer = null
  }

  /**
   * 設置 執行動畫的時間
   * 
   */
  duration (d) {
    this.__duration__ = d
    return this
  }

  /**
   * 設置 開始動畫的間隔
   * 
   */
  delay (d) {
    this.__delay__ = d
    return this
  }

  /**
   * 設置 緩動函數
   * 
   */
  easing (e) {
    this.__easing__ = e
    return this
  }

  /**
   * 中止
   * 
   */
  stop () {
    if (this.timer) {
      cancelAnimationFrame(this.timer)
      this.timer = null
    }
  }

  /**
   * 結束併到最後狀態
   * 
   */
  finish () {
    if (this.timer) {
      cancelAnimationFrame(this.timer)
      this.timer = null
      this.action(1)
      this.resolve()
    }
  }
  /**
   * 開始 動畫
   * 
   */
  run (action, easingfunction) {
    return new Promise((resolve, reject) => {
      // 根據設置的delay來進行延時
      setTimeout(() => {
        // 獲取開始時間
        this.__startTime__ = time()
        easingfunction = easingfunction || this.__easing__ || easing.Linear
        this.action = action
        this.resolve = resolve
        // 這裏先執行一次 由於下次執行時可能跳過了第一帖
        this.action(0)
        // 下面是每貼要執行的內容
        let step = () => {
          // 獲取流逝了的時間
          var passedTime = Math.min(time() - this.__startTime__, this.__duration__)
          // 獲取0到1之間的值是經過緩動函數
          // 參數說明:
          //  t: 已經流逝的時間
          //  b: 初始值
          //  c: 目標值
          //  d: 總時間
          this.action(
            easingfunction(
              passedTime,
              0,
              1,
              this.__duration__
            )
          )
          if (passedTime >= this.__duration__) {
            this.start = null
            this.timer = null
            this.resolve()
          } else this.timer = requestAnimationFrame(step)
        }
        this.timer = requestAnimationFrame(step)
      }, this.__delay__)
    })
  }
}

導出內容

function Animation () {
  return new AnimationCore()
}
Animation.easing = easing

// 導出
export default Animation