1

I'm trying to use a tween as a counter that only returns 0-4 over a duration. I only want it to return a number of the same once. I'm using https://popmotion.io/. Here is what I have so far. 

  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);
 }

The above outputs the following:

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

What I'm after is so it only outputs a unique number from 0 - 4 Example: 

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

They have a filter method that it says.

filter((v: any) => boolean): Returns a new action that filters out values when the provided function returns false.

I'm not sure how I would use the filter to only return the same number once ?

4

1 回答 1

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 （对于 tween 的全局状态）进行比较来过滤。并且在每次更新时，这个全局状态（lastValue）都会改变。重要的是要注意，您应该在过滤之前对值（管道）进行四舍五入。

输出：

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

那么你非常接近解决方案，使用过滤器来解决它。

如果您不知道过滤器是如何工作的，基本上如果迭代器函数为传递的值返回 true，则该值被接受并存储在单独的数组中，如果返回 false，则传递的值被拒绝并且不存储。因此，在过滤器结束时，您会得到一个新数组，其中包含使过滤器迭代器函数返回 true 的所有值。您可以在此处阅读有关过滤器的更多信息

我希望它有所帮助。

于 2018-05-06T07:44:18.790 回答