Мои реанимированные работы не раз. Как заставить эту анимацию работать за один раз?

Question

Я пытаюсь заставить мою панель вкладок исчезать при прокрутке вниз с анимацией. onScroll отправляет логическое значение, если последняя координата y больше текущей координаты y, прокручивая ее вверх и, в противном случае, прокручивая вниз. Если я продолжаю прокручивать, OnScroll все равно отправляет истинное значение моей функции, и анимация работает более одного раза. Как я могу отключить положение, чтобы сработало только toValue, и моя функция не будет запускаться снова и снова, в то время как возвращаемое логическое значение совпадает с onScroll.

function runTiming(value, dest) {
    const clock = new Clock();
    const state = {
        finished: new Value(0),
        position: new Value(0),
        time: new Value(0),
        frameTime: new Value(0),
    };

    const config = {
        duration: 200,
        toValue: new Value(0),
        easing: Easing.inOut(Easing.cubic),
    };

    return block([

        cond(clockRunning(clock), 0, [

            set(state.finished, 0),
            set(state.time, 0),
            set(state.position, value),
            set(state.frameTime, 0),
            set(config.toValue, dest),
            startClock(clock),
        ]),
        timing(clock, state, config),
        cond(state.finished, debug('stop clock', stopClock(clock))),
        state.position,
    ]);
}

Answer 1

Это может быть связано с тем, что событие onScroll вызывается более одного раза.

Я только что написал это вчера и дам вам код, который работает и был протестирован:

export const throttle = (func, limit) => {
  let inThrottle
  return function() {
    const args = arguments
    const context = this
    if (!inThrottle) {
      func.apply(context, args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

class MainComponent extends PureComponent {
  constructor(props) {
    super(props);

    this.offset = 0;
    this.isAnimatingMenu = false;
    this.onScroll = this.onScroll.bind(this)
  };

  onScroll = throttle(event => {
    const currentOffset = event.nativeEvent.contentOffset.y;
    const direction = currentOffset > this.offset ? 'down' : 'up';
    const diff = currentOffset - this.offset;

    if (direction === 'down' && diff > 9 && !this.isAnimatingMenu) { 
      this.isAnimatingMenu = true
      this.onHideMenu(() => this.isAnimatingMenu = false)
    }

    if (direction === 'up' && diff < -9 && !this.isAnimatingMenu) {
      this.isAnimatingMenu = true
      this.onShowMenu(() => this.isAnimatingMenu = false)
    }

    this.offset = currentOffset;    
  }, 75)

  render() {
    <FlatList 
      windowSize={1}
      bounces={false}
      style={styles.flex1}
      scrollEventThrottle={75}
      onScroll={this.onScroll}
      renderItem={this.renderItem}
      data={this.deriveHomeWidgetsDataFromProps()}
    />
  }
}

В функциях onHideMenu и onShowMenu вызовите функцию анимации, чтобы показать / скрыть меню. onScroll может быть реализовано на ScrollView или SectionList также. Если вам нужна дополнительная помощь, дайте мне знать.