模拟抛物线的JavaScript二次函数

Question

我正在寻找一个反二次函数与一个数组(它可以是任何大小)。例如，我不使用线性计算来确定完成百分比(例如，3/ 10 * 100 = 30%)，而是使用二次曲线，以便在回答更多问题时使百分比变平，直到所有问题都回答完毕(一旦回答完所有问题，就应该100%完成)。根据定义，二次函数的指数为2，反求形状时的主导系数为负值。

注意漂亮的曲线，直到下面的抛物线图中的顶点：

​

​

这就是我尝试过的：

const questions = ['q1', 'q2', 'q3', 'q4', 'q5', 'q6', 'q7', 'q8','q9','q10'];

function inverseQuad(x, len) {
 return ((x)**2) * 100;
}

inverseQuad(.1, 10); // 1%
inverseQuad(.2, 10); // 4%
inverseQuad(.3, 10); // 9%
...
inverseQuad(.9, 10); // 81%
inverseQuad(1, 10); //  100%

它正朝着错误的方向前进。它不是倒过来的。如何清理这个二次函数？

Answer 1

编写二次型的一种简单方法是这样做：

​

const completion = (qs, total) => Math .round (100 * qs / total *  (2 - qs / total));

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] .forEach (x => {
  console .log (`${x} => ${completion (x, 10)}`)
})

​

这本质上是100 * (1 - (1 - x)**2)，其中x是实际的完成部分。显然，如果输入是分数：const completion = (x) => 100 * x * (2 - x)，则会更简单。

但我不得不说，用这个来让人们对自己的完成率感觉更好，这似乎是一个相当不友好的谎言。

Answer 2

如果你正在寻找二次曲面，它看起来有点不同。大多数情况下，这些曲线是用于吐温，启动，结束和速度。

例如，您在这里看到了一些图表：https://sole.github.io/tween.js/examples/03_graphs.html

幸运的是，他们已经为这些曲线编写了脚本：https://github.com/tweenjs/tween.js/blob/master/src/Tween.js

寻找二次型，您会发现以下内容：

Quadratic: {
    In: function (k) {
        return k * k;
    },

    Out: function (k) {
        return k * (2 - k);
    },

    InOut: function (k) {
        if ((k *= 2) < 1) {
            return 0.5 * k * k;
        }
        return - 0.5 * (--k * (k - 2) - 1);

    }

},

我认为这个公式就是你要找的，如果不看其他的图表，找出相应的公式。

注意:您需要有规范化的值。

注意:要反转输出，只需执行1 - output