mePlayer/src/js/spectrum.js

/*
 * 频谱动画模拟
 * */
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};