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）=＆gt; boolean）：返回一个过滤掉的新动作提供的函数返回false时的值。

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

Answer 1

Popmotion tween API返回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

嗯，你在非常接近解决方案的地方，使用过滤器来解决它。

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

的更多信息

我希望它有所帮助。

用于唯一编号计数的popmotion补间过滤器

1 个答案: