snapsvg/src/mina.js

/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2024/03/08 10:20:25
 */

import eve from './eve.js'
import { uuid } from './utils.js'

let animations = {},
  requestAnimFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame,
  requestID,
  isArray = Array.isArray,
  diff = function (a, b, A, B) {
    if (isArray(a)) {
      res = []
      for (let i = 0, ii = a.length; i < ii; i++) {
        res[i] = diff(a[i], b, A[i], B)
      }
      return res
    }
    let dif = (A - a) / (B - b)
    return function (bb) {
      return a + dif * (bb - b)
    }
  },
  timer = Date.now,
  sta = function (val) {
    let a = this
    if (val == null) {
      return a.s
    }
    let ds = a.s - val
    a.b += a.dur * ds
    a.B += a.dur * ds
    a.s = val
  },
  speed = function (val) {
    if (val == null) {
      return this.spd
    }
    this.spd = val
  },
  duration = function (val) {
    if (val == null) {
      return this.dur
    }
    this.s = (this.s * val) / this.dur
    this.dur = val
  },
  stopit = function () {
    delete animations[this.id]
    this.update()
    eve('mina.stop.' + this.id, a)
  },
  pause = function () {
    let a = this
    if (a.pdif) {
      return
    }
    delete animations[a.id]
    a.update()
    a.pdif = a.get() - a.b
  },
  resume = function () {
    let a = this
    if (!a.pdif) {
      return
    }
    a.b = a.get() - a.pdif
    delete a.pdif
    animations[a.id] = a
    frame()
  },
  update = function () {
    let a = this,
      res
    if (isArray(a.start)) {
      res = []
      for (let j = 0, jj = a.start.length; j < jj; j++) {
        res[j] = +a.start[j] + (a.end[j] - a.start[j]) * a.easing(a.s)
      }
    } else {
      res = +a.start + (a.end - a.start) * a.easing(a.s)
    }
    a.set(res)
  },
  frame = function (timeStamp) {
    // Manual invokation?
    if (!timeStamp) {
      // Frame loop stopped?
      if (!requestID) {
        // Start frame loop...
        requestID = requestAnimFrame(frame)
      }
      return
    }
    let len = 0
    for (let i in animations)
      if (animations.hasOwnProperty(i)) {
        let a = animations[i],
          b = a.get(),
          res
        len++
        a.s = (b - a.b) / (a.dur / a.spd)
        if (a.s >= 1) {
          delete animations[i]
          a.s = 1
          len--
          ;(function (a) {
            setTimeout(function () {
              eve('mina.finish.' + a.id, a)
            })
          })(a)
        }
        a.update()
      }
    requestID = len ? requestAnimFrame(frame) : false
  }
/***
   * Generic animation of numbers
   **
    * a (number) start _slave_ number
    * A (number) end _slave_ number
    * b (number) start _master_ number (start time in general case)
    * B (number) end _master_ number (end time in general case)
    * get (function) getter of _master_ number (see @mina.time)
    * set (function) setter of _slave_ number
    * easing (function) #optional easing function, default is @mina.linear
    = (object) animation descriptor
    {
      id (string) animation id,
      start (number) start _slave_ number,
      end (number) end _slave_ number,
      b (number) start _master_ number,
      s (number) animation status (0..1),
      dur (number) animation duration,
      spd (number) animation speed,
      get (function) getter of _master_ number (see @mina.time),
      set (function) setter of _slave_ number,
      easing (function) easing function, default is @mina.linear,
      status (function) status getter/setter,
      speed (function) speed getter/setter,
      duration (function) duration getter/setter,
      stop (function) animation stopper
      pause (function) pauses the animation
      resume (function) resumes the animation
      update (function) calles setter with the right value of the animation
    }
  */
export const mina = function (a, A, b, B, get, set, easing) {
  let anim = {
    id: uuid('M'),
    start: a,
    end: A,
    b: b,
    s: 0,
    dur: B - b,
    spd: 1,
    get: get,
    set: set,
    easing: easing || mina.linear,
    status: sta,
    speed: speed,
    duration: duration,
    stop: stopit,
    pause: pause,
    resume: resume,
    update: update
  }
  animations[anim.id] = anim
  let len = 0,
    i
  for (i in animations)
    if (animations.hasOwnProperty(i)) {
      len++
      if (len == 2) {
        break
      }
    }
  len == 1 && frame()
  return anim
}
/*\
     * mina.time
     [ method ]
     **
     * Returns the current time. Equivalent to:
     | function () {
     |     return (new Date).getTime();
     | }
    \*/
mina.time = timer
/*\
     * mina.getById
     [ method ]
     **
     * Returns an animation by its id
     - id (string) animation's id
     = (object) See @mina
    \*/
mina.getById = function (id) {
  return animations[id] || null
}

/*\
     * mina.linear
     [ method ]
     **
     * Default linear easing
     - n (number) input 0..1
     = (number) output 0..1
    \*/
mina.linear = function (n) {
  return n
}
/*\
     * mina.easeout
     [ method ]
     **
     * Easeout easing
     - n (number) input 0..1
     = (number) output 0..1
    \*/
mina.easeout = function (n) {
  return Math.pow(n, 1.7)
}
/*\
     * mina.easein
     [ method ]
     **
     * Easein easing
     - n (number) input 0..1
     = (number) output 0..1
    \*/
mina.easein = function (n) {
  return Math.pow(n, 0.48)
}
/*\
     * mina.easeinout
     [ method ]
     **
     * Easeinout easing
     - n (number) input 0..1
     = (number) output 0..1
    \*/
mina.easeinout = function (n) {
  if (n == 1) {
    return 1
  }
  if (n == 0) {
    return 0
  }
  let q = 0.48 - n / 1.04,
    Q = Math.sqrt(0.1734 + q * q),
    x = Q - q,
    X = Math.pow(Math.abs(x), 1 / 3) * (x < 0 ? -1 : 1),
    y = -Q - q,
    Y = Math.pow(Math.abs(y), 1 / 3) * (y < 0 ? -1 : 1),
    t = X + Y + 0.5
  return (1 - t) * 3 * t * t + t * t * t
}
/*\
     * mina.backin
     [ method ]
     **
     * Backin easing
     - n (number) input 0..1
     = (number) output 0..1
    \*/
mina.backin = function (n) {
  if (n == 1) {
    return 1
  }
  let s = 1.70158
  return n * n * ((s + 1) * n - s)
}
/*\
     * mina.backout
     [ method ]
     **
     * Backout easing
     - n (number) input 0..1
     = (number) output 0..1
    \*/
mina.backout = function (n) {
  if (n == 0) {
    return 0
  }
  n = n - 1
  let s = 1.70158
  return n * n * ((s + 1) * n + s) + 1
}
/*\
     * mina.elastic
     [ method ]
     **
     * Elastic easing
     - n (number) input 0..1
     = (number) output 0..1
    \*/
mina.elastic = function (n) {
  if (n == !!n) {
    return n
  }
  return (
    Math.pow(2, -10 * n) * Math.sin(((n - 0.075) * (2 * Math.PI)) / 0.3) + 1
  )
}
/*\
     * mina.bounce
     [ method ]
     **
     * Bounce easing
     - n (number) input 0..1
     = (number) output 0..1
    \*/
mina.bounce = function (n) {
  let s = 7.5625,
    p = 2.75,
    l
  if (n < 1 / p) {
    l = s * n * n
  } else {
    if (n < 2 / p) {
      n -= 1.5 / p
      l = s * n * n + 0.75
    } else {
      if (n < 2.5 / p) {
        n -= 2.25 / p
        l = s * n * n + 0.9375
      } else {
        n -= 2.625 / p
        l = s * n * n + 0.984375
      }
    }
  }
  return l
}
export default mina