фильтр анимации popmotion для подсчета уникальных номеров - PullRequest
Новая
       28

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

0 голосов
/ 05 мая 2018

Я пытаюсь использовать анимацию движения в качестве счетчика, который возвращает только 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.

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

1 Ответ

0 голосов
/ 06 мая 2018

Popmotion tween API возвращает фильтр, 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. Вы можете узнать больше о фильтрах здесь

Надеюсь, это поможет.

...