javascript - 迭代两个设置的最小值和最大值之间的数字

Question

我正在制作一个 JavaScript 循环，每次循环运行时，某些元素都会非常微妙地改变颜色。我要更改的值是 HSL 颜色的 L 值。

现在我有这个。

var h = 10,
s = 0.5,
l = 1 / ((i += 0.01) % 10);

color = hsl(h, s, l);

现在，它输出的颜色从浅到深，每当它变黑时就重新开始(因为模运算)。

L 值必须在 0 到 1 之间，但是我想将操作的输出限制在 0.1 到 0.9 之间，以避免颜色太暗和太亮。有谁知道如何调整操作以满足这些要求？

另外，我想知道是否有人知道如何在每次达到最小值或最大值时使输出反转(而不是从顶部重新开始)，这意味着它输出如下数字:

0.9...0.89...[...]...0.11...0..1...0.11...[...]...0.89...0.9... 0.89等

谢谢!

Answer 1

您可以通过以下方式将输出值限制在 0 和 1 之间，即 0.1 和 0.9 之间:

cappedValue = 0.1 + 0.8 * uncappedValue

要在 0 到 1 之间弹跳值，您可以使用

boundcingValue = Math.abs(1 - 2 * valueBetween0and1)

所以最终的解决方案是:

var h = 10,
s = 0.5,
l = 1 / ((i += 0.01) % 10);

lbouncing = Math.abs(1 - 2 * l);
lcapped = 0.1 + lbouncing * 0.8;

color = hsl(h, s, lcapped);

还没测试过...