SOURCE

/**
 * @author leeenx
 * @description 一个简单动画函数
 */

import timer from './timer'

const {
  PI,
  cos
} = Math

const EASE_FUNCS = {
  ease: x => -(cos(PI * x) - 1) / 2,
  linear: x => x
}

let timerStamp = 0

// 兼容 ie8~ie9的动画
export default function anim ({ target, duration, ease = 'ease' }) {
  const easeFun = EASE_FUNCS[ease]
  // 生成一个唯一的 timeID
  const timeID = `anim-${Date.now()}-${++timerStamp}`
  // 单位
  const unit = {}
  function from (startAttrs = {}) {
    for (const key in startAttrs) {
      const value = startAttrs[key]
      target[key] = value
      unit[key] = value.replace(/^-?\d+(\.\d+)?/, '')
      // 去单位
      startAttrs[key] = parseFloat(
        startAttrs[key].replace(unit[key], '')
      )
    }
    return { to: to(startAttrs) }
  }
  function to (startAttrs) {
    return endAttrs => new Promise(
      resolve => {
        const attrs = {}
        for (const key in endAttrs) {
          const startAttr = startAttrs[key]
          const endAttr = parseFloat(
            endAttrs[key].replace(unit[key], '')
          )
          attrs[key] = endAttr - startAttr
        }
        let elapse = 0
        const stay = 16.666
        timer.setInterval(
          () => {
            elapse += stay
            if (elapse >= duration) {
              // 运动结束
              elapse = duration
              timer.delete(timeID)
              resolve(endAttrs)
            }
            for (const key in endAttrs) {
              target[key] = `${startAttrs[key] + (attrs[key] * easeFun(elapse / duration))}${unit[key]}`
            }
          },
          stay,
          timeID
        )
      }
    )
  }
  function destory () {
    timer.delete(timeID)
  }
  return { from, to, destory }
}
console 命令行工具 X clear

                    
>
console