javascript - 我们如何在没有条件的情况下递增然后递减计数器？

Question

我正在寻找一种递增然后递减计数器变量的巧妙方法。我希望计数器变量从低值开始，然后递增，向更高的值发展。一旦它达到较高的值，计数器就会递减，直到它回到较低的值。一旦它达到较低的值，计数器就会再次增加到较高的值……我想你明白了。

我正在研究 canvas animation我想在不使用 if 或其他条件测试的情况下运用一些技巧:

这是处理计数器变量的条件逻辑:

incrementing = true

foo = ->

    length += 1 if incrementing
    length -= 1 if not incrementing

    incrementing = false if length > 100
    incrementing = true  if length < 1

最初，我以为我可以使用模数。但是，模除法只会将计数器重置回较低的值——一旦达到最高值，它不会递减计数器。

 0 % 10 =  0
 1 % 10 =  1
 2 % 10 =  2
 3 % 10 =  3
 4 % 10 =  4
 5 % 10 =  5
 6 % 10 =  6
 7 % 10 =  7
 8 % 10 =  8
 9 % 10 =  9
10 % 10 =  0
11 % 10 =  1
12 % 10 =  2
13 % 10 =  3

我确信必须有一种方法可以在不使用条件测试的情况下做到这一点。假设底部值为 0，顶部值为 10，该方法应输出以下内容。

? =  0
? =  1
? =  2
? =  3
? =  4
? =  5
? =  6
? =  7
? =  8
? =  9
? =  8
? =  7
? =  6
? =  5

Answer 1

首先让我们看一些波浪!

你好波浪!

您能找到符合您需求的那个吗？

如果你猜到了 Triangle Wave ，你是对的!

三 Angular 波以均匀的斜率振荡，直到达到最小值或最大值，然后斜率反转。

这里有两件事需要解决:

• 函数的原点将从波的中间开始
• 波从 x 振荡到 -x

我们希望从 0 开始输出并且只包含正值

function triangle(t, a) {
  return Math.abs(((t + a/2) % a) - a/2);
}

让我们试试看

for (var i=0; i<20; i++) {
  console.log(i, triangle(i, 10));
}

输出

0 0
1 1
2 2
3 3
4 4
5 5
6 4
7 3
8 2
9 1
10 0
11 1
12 2
13 3
14 4
15 5
16 4
17 3
18 2
19 1

所以当我们调用 triangle(i, 10) 时，10 就是“句点”。这告诉我们在重复之前我们希望在函数中有多少步骤。

一段 6 会给我们 6 个值，0, 1, 2, 3, 2, 1

一段 4 会给我们 4 个值，0, 1, 2, 1 等

如果你想从 0-9 开始，你需要 20