javascript - 如何 "smooth"一个整数数组

Question

我有一个数组:

array = [10, 10, 10, 10, 10]

我想遍历这个数组，以便它得到一个基于整数的“斜率”。所以如果整数是 2，结果将是:

array = [0, 5, 10, 5, 0]

如果我有一个更大的数组:

bigArray = [50, 50, 50, 50, 50, 50, 50, 50, 50, 50]

那么如果整数仍然是 2，结果将是:

bigArray = [0, 25, 50, 50, 50, 50, 50, 50, 25, 0]

整数的值无关紧要，只要数组有如上所示的“平滑”末端即可。该整数仅指定受影响的索引数量。

Answer 1

你可以简单地计算两端。

function smooth(array, part) {
    var i;
    array = array.slice();
    for (i = 0; i < part; i++) {
        array[i] = array[i] * i / part;
        array[array.length - 1 - i] = array[array.length - 1 - i] * i / part ;
    }
    return array;
}

document.write('<pre>' + JSON.stringify(smooth([10, 10, 10, 10, 10], 2), 0, 4) + '</pre>');
document.write('<pre>' + JSON.stringify(smooth([50, 50, 50, 50, 50, 50, 50, 50, 50, 50], 2), 0, 4) + '</pre>');

一个正弦的例子

function smooth(array, parts) {
    function f(x) {
        // return x; // linear
        return Math.sin(x * Math.PI / 2); // sine
    }

    var i;
    array = array.slice();
    for (i = 0; i < parts; i++) {
        array[i] = f(i / parts) * array[i] | 0;
        array[array.length - 1 - i] = f(i / parts) * array[array.length - 1 - i] | 0;
    }
    return array;
}

document.write('<pre>' + JSON.stringify(smooth([20, 20, 20, 20, 20, 20, 20], 3), 0, 4) + '</pre>');
document.write('<pre>' + JSON.stringify(smooth([50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50], 5), 0, 4) + '</pre>');

奖励:动态生成带有回调的数组，用于平滑

function smooth(length, value, parts, fn) {
    fn = fn || function (x) { return x; };
    return Array.apply(null, { length: length }).map(function (_, i) {
        if (i < parts) {
            return value * fn(i / parts) | 0;
        }
        if (i >= length - parts) {
            return value * fn((length - i - 1) / parts) | 0;
        }
        return value;
    });
}

document.write('<pre>' + JSON.stringify(smooth(5, 10, 2), 0, 4) + '</pre>');
document.write('<pre>' + JSON.stringify(smooth(10, 50, 4), 0, 4) + '</pre>');
document.write('<pre>' + JSON.stringify(smooth(5, 10, 2, function f(x) { return Math.sin(x * Math.PI / 2); }), 0, 4) + '</pre>');
document.write('<pre>' + JSON.stringify(smooth(10, 50, 4, function f(x) { return Math.sin(x * Math.PI / 2); }), 0, 4) + '</pre>');

编辑:此代码适用于 http://easings.net/ 中的公式.如需进一步阅读，我建议访问 What is an easing function? .

// formula     http://easings.net/
// description https://stackoverflow.com/questions/8316882/what-is-an-easing-function
// x: percent
// t: current time,
// b: begInnIng value,
// c: change In value,
// d: duration
function easeInOutQuad(x, t, b, c, d) {
    if ((t /= d / 2) < 1) {
        return c / 2 * t * t + b;
    } else {
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
    }
}

function smooth(array, parts) {
    function fn(f, x, v) {
        return f(x, 1000 * x, 0, v, 1000)
    }

    var i;
    array = array.slice();
    for (i = 0; i < parts; i++) {
        array[i] = fn(easeInOutQuad, i / parts, array[i]) | 0;
        array[array.length - 1 - i] = fn(easeInOutQuad, i / parts, array[array.length - 1 - i]) | 0;
    }
    return array;
}

document.write('<pre>' + JSON.stringify(smooth([20, 20, 20, 20, 20, 20, 20], 3), 0, 4) + '</pre>');
document.write('<pre>' + JSON.stringify(smooth([50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50], 4), 0, 4) + '</pre>');
document.write('<pre>' + JSON.stringify(smooth([50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50], 5), 0, 4) + '</pre>');