用于唯一数字计数的 popmotion tween 过滤器

Question

我正在尝试使用补间作为计数器，在一段时间内只有 returns 0-4。我只希望它return个数相同一次。我正在使用 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): Returns a new action that filters out values when the provided function returns false.

我不确定如何使用过滤器来仅 return 相同的号码一次？

Answer 1

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

的所有值

除了拥有一个全局状态（即 popmotion.tween 以上的状态），别无选择，就像一个变量来存储 lastValue。然后在每个 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（补间的全局状态）进行比较进行过滤。并且在每次更新时都会更改此全局状态（lastValue）。重要的是要注意在过滤之前应该对值（管道）进行舍入。

输出：

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

嗯，你离解决方案很近了，使用过滤器来解决它。

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

希望对您有所帮助。

用于唯一数字计数的 popmotion tween 过滤器

popmotion tween filter for unique number count

javascript

tween

popmotion