javascript - popmotion补间筛选器，用于唯一计数

我正在尝试使用补间作为计数器，该计数器在持续时间内仅返回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）=> boolean）：返回一个过滤掉的新动作
  提供的函数返回false时的值。


我不确定如何使用过滤器只返回一次相同的数字？

最佳答案

Popmotion tween API返回filter，while，start和pipe，其中每个实际上是一个迭代器函数。因此，传递给start.update之前的值将一一传递给那些迭代器函数。这意味着最初（在动画开始之前）您无法获取将传递给start.update的所有值。

除了保留诸如存储lastValue的变量之类的全局状态（即popmotion.tween之上的状态）外，别无选择。然后在每个start.update中更新lastValue，如果当前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)
             })

在上面的代码中，将Tween值通过管道进行舍入，然后通过与lastValue（对于tween处于全局状态）进行比较进行过滤。并在每次更新时更改此全局状态（lastValue）。重要的是要注意，应在过滤值（管道）之前对其进行四舍五入。

输出：

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

好吧，您非常靠近解决方案的地方，可以使用过滤器来解决它。

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

希望对您有所帮助。

关于javascript - popmotion补间筛选器，用于唯一计数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50192664/