newraina/mePlayer

/*
 * 频谱动画模拟
 * */
var canvas,
  ctx,
  specItems = [],
  needStop = false,
  timer = null,
  random = Math.random

function randHeight() {
  if (random() > 0.8) {
    return random() * 8 + 11
  } else {
    return random() * 6 + 2
  }
}

var randHeightGenerator = function(base) {
  var max = base * 1.5 > 28 ? 28 : base * 1.5,
    min = 1,
    direction = random() > 0.5 ? 1 : -1,
    tempHeight = base,
    curStep
  return function() {
    curStep = direction
    tempHeight += curStep
    if (tempHeight >= max) {
      direction *= -1
      tempHeight = max
    } else if (tempHeight <= min) {
      direction *= -1
      tempHeight = min
    }
    if (random() > 0.9) {
      direction *= -1
    }
    return tempHeight
  }
}

function loop() {
  ctx.clearRect(0, -canvas.height / 2, canvas.width, canvas.height)
  for (var i = 0; i < specItems.length; i++) {
    var item = specItems[i]
    var height = item.getHeight()
    ctx.fillRect(
      i + specItems[i].xSpace,
      -height / 2,
      specItems[i].width,
      height
    )
  }

  if (!needStop) {
    timer = requestAnimationFrame(loop)
  }
}

function init(canvasElem, width = 220, height = 30, color = '#D94240') {
  canvas = canvasElem
  canvas.width = width
  canvas.height = height
  ctx = canvas.getContext('2d')
  ctx.fillStyle = color
  ctx.translate(0, height / 2)

  for (let i = 0; i < 64; i++) {
    var xSpace = i == 0 ? 0 : 5 * i
    var tempItem = {
      xSpace: xSpace,
      width: 1,
      getHeight: randHeightGenerator(randHeight())
    }
    specItems.push(tempItem)
  }
}

function draw() {
  needStop = false
  loop()
}

function stop() {
  needStop = true
}

export { init, draw, stop }