Блог

Главная - Вопросы по программированию - Анимированный заголовок в scrollview

Анимированный заголовок в scrollview

#react-native #animation #react-animated

#react-native #Анимация #реагирующий-анимированный

Вопрос:

У меня есть scrollview, поверх которого я отображаю заголовок. Моя цель — анимировать так, чтобы при прокрутке пользователем вниз заголовок сворачивался, а при прокрутке представления вверх заголовок расширялся. Я нашел множество примеров, когда пользователю приходится прокручивать до упора, чтобы заголовок расширился. Я бы хотел, чтобы заголовок расширялся, как только вид прокрутки прокручивается вверх.

Как я могу этого добиться?

Вот что у меня есть на данный момент:

 type State = { scrollY: Animated.Value };
....

headerHeight = this.state.scrollY.interpolate({
Диапазон входных данных: [
0, 60
],
Диапазон выходных данных: [60, 0],
экстраполировать: «зажим»
});

 <Animated.View style={{ height: headerHeight, backgroundColor: "#F0f" }}
          >
            <ScreenHeader
              ref={this.screenHeaderRef}
              onTouchAvatar={this.handleOpenProfile}
              onTouchNotifications={this.handleOpenNotification}
              user={currentUser}
              newNotifications={this.props.newNotifications}
            />
          </Animated.View>
          <WrappedComponent
            onScroll={Animated.event([
              {
                nativeEvent: {
                  contentOffset: {
                    y: 
                      this.state.scrollY
                  }
                }
              }
            ])}
            onMomentumScrollEnd={this.handleMomentumScrollEnd}
            {...this.props}
          />

Комментарии:

1. вы добились прокрутки? Просто нужно исправить заголовок для расширения?

2. @SubhenduKundu Да, в приведенном выше коде, когда вид прокручивается вниз, заголовок сворачивается, а когда он прокручивается вверх и достигает вершины, заголовок расширяется. Мне нужно иметь возможность развернуть его, как только пользователь прокручивает страницу вверх, даже если представление находится не вверху.

Ответ №1:

Итак, вы правы насчет анимации translateY свойства. Итак, я сделал это немного по-другому ради этого вопроса (плохо, извините за это, вам нужно немного поиграть с этим, чтобы получить правильную анимацию). Поэтому попробуйте задать стиль анимированного представления translateY на 0 ;

 <Animated.View                 
  style={[{
    transform: [
      {
        translateY: this.transform
      }
    ]
  }, {
    backgroundColor: 'red'
  }]}
>

Затем при прокрутке установите его на -100 или любую другую высоту вашего заголовка.

позже, когда пользователь вернется к началу 0, вы установите для него значение 0 . Надеюсь, это поможет. Вот небольшой пример, извините, что возвращаюсь поздно. 🙂 https://snack.expo.io/@subkundu/header-hideshow