如何实现Uber Eats水平菜单动画？

Question

我正在尝试实现相同的Uber Eats水平菜单动画，因此当相应类别在Y轴上可见时，类别将滚动到X位置0。

这是我到目前为止所拥有的

1. 首先使用handleScroll函数检索Y位置，并获取onLayout以获取每个类别视图的位置。

 <Animated.ScrollView
            ref={scrollView => (this.scrollView = scrollView)}
            scrollEventThrottle={5}
            onScroll={Animated.event(
              [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
              {
                useNativeDriver: true,
                listener: event => {
                  this.handleScroll(event);
                }
              }
            )}
          >
          
<FeedContainer key={index} onLayout={this.onLayout(category)}>

1. 然后使用handleScroll函数检查位置减去标题栏的位置，以便检索Y轴上的活动类别视图。

  handleScroll = event => {
    const scrollPosition = event.nativeEvent.contentOffset.y;
    const category = this.state.positions.reduce((previous, position) => {
      if (
        position.y - 140 < scrollPosition &&
        position.y + position.height - 140 > scrollPosition
      ) {
        return (previous = position.category);
      }
      return previous;
    }, '');

    const xPosition = this.state.horizontalPositions.reduce(
      (previous, position) => {
        if (category === position.category) {
          return (previous = position.x);
        }
        return previous;
      },
      0
    );

1. 最后，我在单杠组件上通过y位置并执行滚动。

onChangeTab = category => {
    const { onChangeTab } = this.props;
    onChangeTab(category);
    const { width } = Dimensions.get('window');
    const maxScroll = this.state.maxPosition.x - width;

    let cordinateFromCategory = this.state.positions.reduce(
      (previous, current) => {
        if (current.category == category) {
          return (previous = current.x);
        }
        return previous;
      },
      0
    );

    if (cordinateFromCategory > maxScroll && Platform.OS == 'ios') {
      cordinateFromCategory = maxScroll;
    }

    this.props.customRef = scrollViewTab => {
      scrollViewTab.getNode().scrollTo({
        x: cordinateFromCategory,
        animated: true
      });
    };
  };

总体看来，该行为接近预期的行为，但是正如您在下面的gif中看到的那样，水平滚动条仅在完全停止Y滚动时才滚动到X位置。

我怎么能获得像Uber Eats一样的平稳效果？