Фильтр анимации popmotion для подсчета уникальных номеров

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) => boolean): возвращает новое действие, которое отфильтровывает значения, когда предоставленная функция возвращает false.

Я не уверен, как бы я использовал фильтр, чтобы вернуть тот же номер только один раз?

Answer 1

Popmotion tween API возвращает filter, while, start и pipe, где каждый из них на самом деле является функцией итератора. Таким образом, значения перед передачей в start.update будут передаваться в эти функции итератора одну за другой. Это означает, что изначально (до запуска анимации) вы не можете получить все значения, которые будут переданы в start.update.

Что не оставляет выбора, кроме как иметь глобальное состояние (то есть состояние выше popmotion.tween), подобное переменной для хранения lastValue. Затем обновите lastValue в каждом 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)
             })

В приведенном выше коде значения Tween передаются для округления, а затем фильтруются путем сравнения с lastValue (состояние, глобальное для анимации движения). И при каждом обновлении это глобальное состояние (lastValue) изменяется. Важно отметить, что вы должны округлить значения (трубу) перед фильтрацией.

Выход:

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

Ну, вы очень близки к решению, используя фильтр для его решения.

В случае, если вы не знаете, как работает фильтр, в основном, если функция итератора возвращает true для переданного значения, значение принимается и сохраняется в отдельном массиве, а если возвращается false, переданное значение отклоняется и не сохраняется. Таким образом, в конце фильтра вы получаете новый массив, содержащий все значения, благодаря которым функция итератора фильтра возвращает true. Вы можете прочитать больше о фильтрах здесь

Я надеюсь, что это помогает.