一次数计数的波波间滤波器

Question

我试着用吐温作为计数器，在一段时间内只返回0-4。我只想要它返回一个数目相同的一次。我在用https://popmotion.io/。这是我到目前为止所拥有的。

  import { tween, easing, transform } from 'popmotion';

  onHandleClick() {
   // const { clamp } = transform;
    const twn = tween({ from: 0, to: 4 }).pipe(Math.round);
    twn.start(this.addToList);
  }

  addToList(val) {
    console.log('val = ', val);
 }

上述产出如下：

val =  1
val =  1
val =  2
val =  2
val =  2
val =  3
val =  3
val =  3
val =  3
val =  3
val =  4
val =  4
val =  4
val =  4
val =  4
val =  4
val =  4

我想要的是，它只输出0-4示例中的唯一数字：

val =  0
val =  1
val =  2
val =  3
val =  4

他们有一种过滤方法，上面写着。

filter((v: any) =>布尔值)：返回一个新操作，当提供的函数返回false时，该操作过滤掉值。

我不知道如何使用过滤器只返回相同的号码一次？

Answer 1

波普运动间API返回过滤器、同时、开始和管道，每个过滤器实际上都是一个迭代器函数。因此，传递给start.update之前的值将一个一个地传递给这些迭代器函数。这意味着最初(在动画开始之前)您无法获得传递给start.update的所有值。

这就只剩下一个全局状态(即popmotion.tween上方的状态)，比如存储lastValue的变量。然后更新每个start.update中的start.update，如果当前updateValue与lastValue相同，则进行筛选。让我们看看代码，它将更容易理解

var lastValue;

popmotion.tween({from:0,to:4})
            .pipe(Math.round)
            .filter(function(value){
                return lastValue != value;
             })
            .start(function(updateValue){
                lastValue = updateValue;
                console.log('val = ',updateValue)
             })

在上面的代码中，吐温值通过管道进行四舍五入，然后通过与lastValue (吐温的全局状态)进行比较来过滤。每次更新时，全局状态(LastValue)都会发生变化。重要的是要注意，在筛选值(管道)之前，您应该对其进行舍入。

输出：

val =  0
val =  1
val =  2
val =  3
val =  4

好吧，你在哪里非常接近解，用过滤器来解决它。

如果您不知道过滤器是如何工作的，基本上，如果迭代器函数对传递的值返回true，则该值将被接受并存储在单独的数组中，如果返回false，则传递的值将被拒绝，而不是存储。因此，在过滤器的末尾，您将得到一个包含所有值的新数组，这些值使filter迭代器函数返回为true。您可以阅读更多有关筛选器这里的信息。

希望能帮上忙。